100％的宽度大于父母的div

我正在研究vBulletin主题，但在线程列表中，每个线程的宽度都为100％，但线程也比父母的大，但是当我删除线程边界时，它们将适合父母的分区:)。所以认为这个问题是在边界上。100％的宽度大于父母的div

你可以看到更好的jsfiddle（线程是白色形状与黑色边框）

<body> 
    <div class="after-body"> 
     <div class="body-wrapper"> 
      <div class="threadlist"> 
        <ol class="threads"> 
         <li class="threadbit"><div class="thread"></div></li> 
         <li class="threadbit"><div class="thread"></div></li> 
        </ol> 
      </div> 
     </div> 
    </div> 
</body>

来源

2013-08-03 AmirHosein KazemNejad

这里的问题是，width是一个大小与文本的内部区域，并与边框的填充被“包裹”在它周围。该规范没有意义，但大多数现代浏览器都遵循它。

你的救星被称为box-sizing: border-box;。

.threadbit .thread { 

    /* ... some stuff ... */ 

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

看吧：此属性here和herejsFiddle

更多信息。

来源

2013-08-03 09:31:00 MightyPork

是的，你是对的，边界推出元素的“宽度”。这是现代浏览器的默认box-sizing。

.threadbit .thread { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

需要注意的是它不支持IE8下面根据这样你在做什么，你想要的支持，你可能需要找到一个替代的解决方案或设计：这可以用最喜欢的声明进行修改。

编辑

它已经一段时间，因为我原来的答复和浏览器支持略有改变。 Firefox 29，Chrome 10，Safari 5.1和Internet Explorer 8以上版本都不支持box-sizing，但是有几个特定版本的已知问题。

全/向上最新名单可在caniuse.com但这里是少数的人，我发现从该网站重要：

IE8：如果使用最小/最大宽度/高度忽略box-sizing: border-box
IE8：所述min-width属性应用于content-box即使box-sizing设置为border-box
IE9：滚动条的宽度从元件的宽度时设置为position: absolute，要么overflow: auto减去或overflow-y: scroll

随着IE8和IE9的市场份额下降，这些问题和其他上市的问题将不再是未来的问题。

来源

2013-08-03 09:31:12 Turnerj

按Ctrl + C主的链接，但他不是一个造型textarea的：通过http://css-tricks.com/box-sizing/ – MightyPork

显然2P @！不只是张贴一个小提琴的链接，然后编辑我的答案一堆的巨大风扇。 ;）也是提问人的练习和学习的一部分。 – Turnerj

哦，是的，但它肯定不会伤害到''textarea'替换'.threadbit .thread'在复制的片段？ – MightyPork

请务必记住，当您遇到与从firefox开发工具或chrome的metrix框中通过框模型的元素的宽度检查维度有关的问题时。其送花儿给人一个好主意，包括

*, *:before, *:after { 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
    }

还要确保检查显示属性。如果一个元素是内联显示的，它不会占用宽度，边距&填充值，如果它显示为内嵌块，则取宽度，边距&填充。

这里是箱式施胶性http://www.paulirish.com/2012/box-sizing-border-box-ftw/

来源

2013-08-03 09:56:57

100％的宽度大于父母的div

回答

相关问题