[问题]小白，在IE6下，内容会撑开设置好的宽高

2016/6/14镜像同步9 回复

<html> <head> <meta charset="utf-8"> <title></title> <style> .box{width:400px;} .left{width:200px;height:300px;background:red;float:left;} .right{width:200px;float:right;} .div{width:180px;height:180px;background:blue;padding:15px;} /* 在IE6下，内容会撑开设置好的宽高//div撑开了right的宽度，right和left的宽度超过了box，为什么right折行了，为什么left和right没有撑开box的宽度？ */ </style> </head> <body> <div class="box"> <div class="left"></div> <div class="right"> <div class="div"></div> </div> </div> </body> </html>

订阅后，新回复会通过你的通知中心匿名送达。

9 条回复

PiEgg机器人#1 · 2016/6/14

为什么还要去管IE6的样式了呢……不是早就被淘汰了么

dcy0701机器人#2 · 2016/6/14

宽度都设置了怎么会撑开。。。

AlstonLYG机器人#3 · 2016/6/14

width在默认盒子模型下是内容的宽度, 不包含 padding, 所以你的 .div 实际宽是 180+15*2 = 210px, 大于了 .right 的200, 所以出来了. 如果想要包含 padding 的 width, 就改 box-sizing: border-box float 的性质就是当前行能放下就放当前行, 放不下就放下一行. 在其他浏览器下,是直接按照.right 的右边界算位置的, 但是 ie 写是按. right 超出来的10px (上边的210-200px)右边算边界的, 所以就400px 放不下了. 至于 ie 下为什么 .right 的右边界是按出界的 .div 来算, 应该就是 ie 的蛋疼之处了. 这种比较边角的情况下不同的解读方式... 具体不懂另外, 建议一定写 doctype, 免去quirk mode 出现的情况. 不过你这个没写的应该出发 quirk, 但我自己尝试了也没触发 ie box-model, 不知道是不是我理解错了 wiki 上的这个表格 (https://en.wikipedia.org/wiki/Quirks_mode) ...

qqpp3939机器人#4 · 2016/6/14

【在 AlstonLYG 的大作中提到: 】 : width在默认盒子模型下是内容的宽度, 不包含 padding, 所以你的 .div 实际宽是 180+15*2 = 210px, 大于了 .right 的200, 所以出来了. 如果想要包含 padding 的 width, 就改 box-sizing: border-box : float 的性质就是当前行能放下就放当前行, 放不下就放下一行. 在其他浏览器下,是直接按照.right 的右边界算位置的, 但是 ie 写是按. right 超出来的10px (上边的210-200px)右边算边界的, 所以就400px 放不下了. : 至于 ie 下为什么 .right 的右边界是按出界的 .div 来算, 应该就是 ie 的蛋疼之处了. 这种比较边角的情况下不同的解读方式... 具体不懂 : ................... 但是 ie 写是按. right 超出来的10px (上边的210-200px)右边算边界的, 所以就400px 放不下了.为什么right和left不同行，right和left超过了box的宽度，所以right要到下一行，但是right+left可以像div撑开right一样撑开box吗

ping1991机器人#5 · 2016/6/14

为啥是ie...还ie6!!!!!!!!!!!!!!!!

nuanyangyang机器人#6 · 2016/6/14

ie6天地灭，html5保平安。ie6都被微软抛弃了

AlstonLYG机器人#7 · 2016/6/14

因为.left 和.right 是浮动的, 浮动的元素除非单个元素超过父元素, 否则是不会撑开的. 浮动的特征就是不够位置了自动换行. 换个简单了例子你一定理解: 在页面, 或者一个 div 里(假定宽度240), 你放 n 多个50*50的 float 的 div, 那结果就是一排一排的, 而不会是一行一直撑开到后边. 一行排满了没地方 float 了, 就浮到下一行. 【在 qqpp3939 的大作中提到: 】 : 但是 ie 写是按. right 超出来的10px (上边的210-200px)右边算边界的, 所以就400px 放不下了.为什么right和left不同行，right和left超过了box的宽度，所以right要到下一行，但是right+left可以像div撑开right一样撑开box吗

ztinpn机器人#8 · 2016/6/15

我发现只有浏览器工作在接近标准模式的时候会出现换行情况，标准和怪异模式都是正常的，看了资料，不懂为毛【在 AlstonLYG (AlstonLYG) 的大作中提到: 】 : 因为.left 和.right 是浮动的, 浮动的元素除非单个元素超过父元素, 否则是不会撑开的. 浮动的特征就是不够位置了自动换行. : 换个简单了例子你一定理解: 在页面, 或者一个 div 里(假定宽度240), 你放 n 多个50*50的 float 的 div, 那结果就是一排一排的, 而不会是一行一直撑开到后边. 一行排满了没地方 float 了, 就浮到下一行.

qqpp3939机器人#9 · 2016/6/15

【在 AlstonLYG 的大作中提到: 】 : 因为.left 和.right 是浮动的, 浮动的元素除非单个元素超过父元素, 否则是不会撑开的. 浮动的特征就是不够位置了自动换行. : 换个简单了例子你一定理解: 在页面, 或者一个 div 里(假定宽度240), 你放 n 多个50*50的 float 的 div, 那结果就是一排一排的, 而不会是一行一直撑开到后边. 一行排满了没地方 float 了, 就浮到下一行. : 哦，明白了，还有一个问题 <html> <head> <meta charset="utf-8"> <title></title> <style> .div{width:200px;height:180px;background:red;} /* 为什么div里的内容出来了？div设置的宽度只对背景有效，其内容还是占满一行吗？ */ </style> </head> <body> <div class="div">123123123123123123123123123123123123123123123123123123123123123</div> </body> </html> [upload=1][/upload]