首页新闻找找看学习计划

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>
Mr.He多多指教的主页 Mr.He多多指教 | 初学一级 | 园豆:139
提问于:2016-02-25 10:32
< >
分享
最佳答案
0

因为id="d3"这个div没有内容,高度就会为0,所以不会出现滚动条。

你在里面加点东西就OK了

收获园豆:10
hetianqi | 初学一级 |园豆:71 | 2016-02-25 13:40

不是,我上面有alert语句,alert出来的东西不是0,而且已经overflow了。

Mr.He多多指教 | 园豆:139 (初学一级) | 2016-02-25 14:01

不是,我上面有alert语句,alert出来的东西不是0,而且已经overflow了,而且我既然都设置了固定宽度,和里面有没有内容时没有关系的。

Mr.He多多指教 | 园豆:139 (初学一级) | 2016-02-25 14:02

@Mr.He多多指教: alert出来的只是宽度,如果高度为0的话,在浏览器渲染的时候这个东西就不会占据空间,所以也就不会出现滚动条了。

hetianqi | 园豆:71 (初学一级) | 2016-02-25 14:04

@heron: 你加个border试试,他的border是有宽度的。

Mr.He多多指教 | 园豆:139 (初学一级) | 2016-02-25 14:18

@Mr.He多多指教: 你对容器的盒模型都没理解清楚,你加padding和border一样会对容器的宽高产生影响,加了之后它的高度就不为0了,当然就会出现滚动条了。建议你先去研究下盒模型

hetianqi | 园豆:71 (初学一级) | 2016-02-25 14:21

@heron: 你的意思我明白,但是我很不明白的一点是,当我的容器里面没有东西的的时候,谷歌和火狐不显示滚动条,你的解释是div没内容,高度为0,但是高度和水平方向的滚动条应该没有关系啊,而且alert出来的width为什么是有值的(和我设置的是一样的),多谢解答。

Mr.He多多指教 | 园豆:139 (初学一级) | 2016-02-25 14:36

@Mr.He多多指教: 一个内容要在浏览器中渲染,不仅仅需要有宽度,还需要有高度,这样它才能在浏览器中占据一定的位置。

overflow的解释是这样的:检索或设置对象处理溢出内容的方式

注意是内容溢出,如果一个容器仅仅有宽度没有高度,那何谈内容呢。

IE浏览器也仅仅是出现了滚动条的样子,并不可以滚动。

你应该做的是知道出现或者不出现滚动条的原因,不用纠结谷歌和获取与IE的差异

hetianqi | 园豆:71 (初学一级) | 2016-02-25 14:44

@heron: 非常感谢,我明白了,不过我用的是IE10,没有内容,会出现滚动条,也能够拖动,不过这些都无所谓了,无关紧要的,没找到重点,谢谢。

Mr.He多多指教 | 园豆:139 (初学一级) | 2016-02-25 14:51

@Mr.He多多指教: 我的IE11看到的是不能拖动。。。

hetianqi | 园豆:71 (初学一级) | 2016-02-25 14:56
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册