css overflow 三中浏览器兼容性的问题
0
悬赏园豆：10
[已解决问题]
解决于 2016-02-25 15:03
我在三种浏览器中分别执行以下的代码，为什么只有IE有横向滚动条，而火狐和谷歌，必须要在id="d3"的div中加上padding属性才可以出现横向滚动条。谁能解答一下，谢谢。如果大家不知道，帮忙推荐一下这个问题，把大神请出来，谢谢啦
<body> <div id="d1"style="width:1100px;height:325px;overflow:auto;"> <!--<div id="d2" style="min-width:900px;width: auto; padding: 50px; margin: 50px;"></div>--> <div id="d3" style="min-width: 900px; width: 1200px;"></div> </div> <script> alert($("#d3").css("width")); </script> </body>
最佳答案
0
因为id="d3"这个div没有内容，高度就会为0，所以不会出现滚动条。
你在里面加点东西就OK了
收获园豆：10
不是，我上面有alert语句，alert出来的东西不是0，而且已经overflow了。
不是，我上面有alert语句，alert出来的东西不是0，而且已经overflow了，而且我既然都设置了固定宽度，和里面有没有内容时没有关系的。
@Mr.He多多指教: alert出来的只是宽度，如果高度为0的话，在浏览器渲染的时候这个东西就不会占据空间，所以也就不会出现滚动条了。
@heron: 你加个border试试，他的border是有宽度的。
@Mr.He多多指教: 你对容器的盒模型都没理解清楚，你加padding和border一样会对容器的宽高产生影响，加了之后它的高度就不为0了，当然就会出现滚动条了。建议你先去研究下盒模型
@heron: 你的意思我明白，但是我很不明白的一点是，当我的容器里面没有东西的的时候，谷歌和火狐不显示滚动条，你的解释是div没内容，高度为0，但是高度和水平方向的滚动条应该没有关系啊，而且alert出来的width为什么是有值的（和我设置的是一样的），多谢解答。
@Mr.He多多指教: 一个内容要在浏览器中渲染，不仅仅需要有宽度，还需要有高度，这样它才能在浏览器中占据一定的位置。
overflow的解释是这样的：检索或设置对象处理溢出内容的方式
注意是内容溢出，如果一个容器仅仅有宽度没有高度，那何谈内容呢。
IE浏览器也仅仅是出现了滚动条的样子，并不可以滚动。
你应该做的是知道出现或者不出现滚动条的原因，不用纠结谷歌和获取与IE的差异
@heron: 非常感谢，我明白了，不过我用的是IE10，没有内容，会出现滚动条，也能够拖动，不过这些都无所谓了，无关紧要的，没找到重点，谢谢。
@Mr.He多多指教: 我的IE11看到的是不能拖动。。。
