在博主中,溢出在IE中不起作用 [英] in blogger, overflow doesn't work in IE
问题描述
这是我的博客链接 http://testt0646t.blogspot.tw/2017/ 06 / test.html
如果您使用chrome或firefox打开它,您会发现该滚动效果很好;然而,如果你用IE打开它,你会发现滚动不起作用。我试图在互联网上搜索,但没有发现任何用处。我认为我的原因是HTML语法 overflow:auto
不起作用,任何人都可以帮我解决这个问题吗?
< div style =background:#ffffff; border-width:0.1em 0.1em 0.1em 0.8em; border:固体灰色;溢出:自动;填充:0.2em 0.6em;宽度:自动;>< pre style =line-height:125%; margin:0;>< span style =color:# 008800; font-weight:bold;>打印< / span> < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< / pre>< / div>
到 pre
元素可以解决问题。这个问题是由于 word-wrap:break-word 由Blogger添加到元素
元素
< div style =background:#ffffff; border-width:0.1em 0.1em 0.1em 0.8em; border:solid grey; overflow:auto; padding:0.2em 0.6em; width:auto;>< pre style =word-wrap:normal; line-height:125%; margin:0;>< span style =color:#008800; font-weight:bold; >打印< /跨度> < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< span style =color:#008800; font-weight:bold;> print< / span> ; < span style =background-color:#fff0f0;>'hello world!'< / span>< / pre>< / div>
here is my blog link http://testt0646t.blogspot.tw/2017/06/test.html
if you open it with chrome or firefox, you can find that scroll works well; however, if you open it with IE, you will find the scroll does not work. I tried search on the internet, but found nothing useful. I thought the reason my be that the HTML syntax, overflow:auto
doesn't work, can anyone help me with this?
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span>
</pre>
</div>
Adding word-wrap:normal
to the pre
element should resolve the problem. The issue is happening because of the word-wrap:break-word property added by Blogger to the body
element
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="word-wrap:normal;line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span><span style="color: #008800; font-weight: bold;">print</span> <span style="background-color: #fff0f0;">'hello world!'</span>
</pre>
</div>
这篇关于在博主中,溢出在IE中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!