html – 水平可滚动表末尾的随机额外空格

概述我正在使用pygments在静态 HTML页面上显示CSS样式的代码,但是遇到了一个奇怪的错误,它呈现了< pre>在Safari中错误地标记.正如您在此 fiddle中可以看到的那样,当您向表中右侧滚动时,木炭背景(在< pre>上设置)在文本停止之前停止,并且文本的其余部分不是非常易读. 一些观察： >这在Chrome中运行良好 >如果我删除< pre>< / pre>内的空白行一切都按预期工 我正在使用pygments在静态 HTML页面上显示CSS样式的代码,但是遇到了一个奇怪的错误,它呈现了< pre>在Safari中错误地标记.正如您在此 fiddle中可以看到的那样,当您向表中右侧滚动时,木炭背景(在< pre>上设置)在文本停止之前停止,并且文本的其余部分不是非常易读.

一些观察：

>这在Chrome中运行良好
>如果我删除< pre>< / pre>内的空白行一切都按预期工作
>删除< span class =“s”>< / span>也有效
>添加溢出：自动到< pre>给了我2个滚动条,它们彼此独立滚动

我尽可能地减少了这个问题(如小提琴中所见). HTML输出我无法改变,但我可以根据需要修改CSS,这就是我正在寻找的解决方案.

我在OS X 10.11.4上的Safari 9.1上试过这个.有谁知道发生了什么？

截图：

解决方法 查看以下代码段,看看它是否有帮助.请注意,我将原始可滚动内容从整个框更改为代码区(不包括行号).

它在Chrome,firefox和Safari上运行良好,经过测试.它也适用于较大的行号.

jsFiddle

.highlighttable {  border-radius: 5px;  border-collapse: collapse;  border-spacing: 0;  wIDth: 100%;}.highlighttable .linenos {  background-color: #C1C2C3;  padding: 0 5px;  wIDth: 1%;  text-align: right;}.highlighttable .code {  background: #343642;  position: relative;}.highlighttable .highlight {  overflow-x: auto;  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;}.highlighttable .highlight pre {  color: #C1C2C3;}

<table ><tr><td >  <div ><pre>12</pre>  </div></td><td >  <div ><pre>let variable = <span >&quot;A very long string goes here and it doesn't span multiple lines but makes the table/div scroll (incorrectly)  instead.&quot;</span></pre>  </div></td></tr></table>

总结

以上是内存溢出为你收集整理的html – 水平可滚动表末尾的随机额外空格全部内容，希望文章能够帮你解决html – 水平可滚动表末尾的随机额外空格所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。