html高度 宽度继承父标签,:before或:after伪类设置宽度100%或inherit超过父元素宽度的解决办法...

如下代码，浏览器实际显示的.side宽度为285.59，而.side:before的宽度为288：

www.02405.com

.side{

width: 15%;

float: left;

background-color:#5b9ae8;

}

.side::before{

content: "";

width: inherit;

position: absolute;

top: 0;

bottom: 0;

z-index: -1;

background-color:#deec82;

border: inherit;

}

问题解析：

side宽度width:15%是根据其父元素的宽度来计算

side::before宽度width:inherit继承side为width:15%

又因为side::before是position:absolute绝对定位，因此宽度是根据最近的position属性不为static的祖类来计算

上面问题是因为这俩宽度一个是计算body的15% 一个计算html的15%

而浏览器默认样式body {margin: 8px;}

所以计算出来宽度差有 8x2x15% = 2.4

解决办法：

设置side的position: relative;这样side::before会相对于side定位，宽度就会一样了。