如何在HTML页面添加并正确格式化代码片段？解决跨浏览器兼容问题

这个右移问题基本是浏览器默认样式搞的鬼——不同浏览器会给<pre>和<code>标签加不同的内边距、外边距甚至文本缩进，再加上如果你的代码内容在HTML里不小心多了缩进，就会出现整体右移的情况。下面给你一套能兼容Safari、Chrome、Firefox和IE（至少IE8+）的解决方案：

第一步：修正HTML结构，消除多余缩进 #

<pre>标签会完全保留代码里的所有空白字符，所以如果你的代码内容在HTML中被缩进了（比如嵌套在其他元素里时加了空格），显示出来就会右移。要把代码内容顶格写：

<pre><code class="codeblock">s3://bucket-name/partition_date=2018-05-22/views.parquet
s3://bucket-name/partition_date=2018-05-22/clicks.parquet
s3://bucket-name/partition_date=2018-05-21/views.parquet
s3://bucket-name/partition_date=2018-05-21/clicks.parquet
s3://bucket-name/partition_date=2018-05-20/views.parquet
s3://bucket-name/partition_date=2018-05-20/clicks.parquet
//...</code></pre>

第二步：添加兼容多浏览器的CSS样式 #

用CSS重置默认样式，统一各个浏览器的表现：

/* 重置pre标签的默认样式 */
pre {
  margin: 0; /* 消除浏览器默认外边距 */
  padding: 1em; /* 给代码块加内边距，避免内容贴边 */
  overflow-x: auto; /* 长代码时显示横向滚动条，IE8+支持 */
  white-space: pre; /* 保留原始换行和空格，所有目标浏览器支持 */
  text-align: left;
  border: 1px solid #eee; /* 可选：添加边框区分代码块 */
  background-color: #f8f8f8; /* 可选：添加背景色提升可读性 */
}

/* 重置code标签的样式 */
pre code.codeblock {
  display: block;
  padding: 0;
  margin: 0;
  white-space: inherit; /* 继承pre的空白处理规则 */
  font-family: monospace; /* 强制使用等宽字体，保证代码对齐 */
  text-indent: 0; /* 消除可能的文本缩进导致的右移 */
}

关键样式说明 #

• overflow-x: auto：当代码行过长时，会自动显示横向滚动条，不会撑破页面容器，所有目标浏览器都支持这个属性。
• font-family: monospace：确保代码使用等宽字体，避免不同浏览器默认字体导致的对齐问题。
• white-space: pre：严格保留代码里的换行和空格，这是<pre>标签的核心功能，IE8及以上都能完美支持。
• text-indent: 0：防止部分浏览器给<code>标签默认添加文本缩进，导致代码整体右移。

这样处理后，你的代码块就能在所有目标浏览器里正常显示，不会出现右移问题啦！

内容的提问来源于stack exchange，提问作者ScalaBoy