在博主中，溢出在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屋！