问题
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>
回答1:
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>
来源:https://stackoverflow.com/questions/44691340/in-blogger-overflow-doesnt-work-in-ie