前端技术 手机教程
程序开发 平面动画
系统软件 运营推广
CMS教程 在线手册
资源下载 网络安全
精准搜索请尝试:精确搜索

:before或:after伪类设置宽度100%或inherit超过父元素宽度的解决办法

2020-11-10 16:19:35 来源:原创 作者:寂静的神经

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


<div class="side">
www.02405.com
</div>
<style type="text/css">
.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;
}
</style>

问题解析:

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定位,宽度就会一样了。

分享到:
本文关键词:before after 伪类

相关文章

零五科技,分享IT知识,国内顶级IT知识门户网站。

Copyright (C) www.02405.com, All Rights Reserved.

零五科技 版权所有 辽ICP备13002105号-1