Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
342 views
in Technique[技术] by (71.8m points)

CSS的父元素宽度竟然会给子元素增加1像素的宽度

遇到一个百思不得其解的问题,就是父元素的宽度,给子元素像素增加了1个像素的宽度,可以看下图,红线和黄线均为子元素,它们的宽度为1个像素
GIF.gif

据不完全准确的观察,大概就是数值能整除4就会出现影响,可通过以下代码在w3school上尝试

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>    
    <div id="xx">
        x
        <div class="yy">        
            <div class="xx"></div>
        </div>
    </div>
    <style type="text/css" media="all">
        #xx{
            padding: 10px;
            background-color: lightgray;
            width: 101px;
            position: relative;           
        }
        .xx{
            width: 1px;
            position: absolute;
            top:0;
            left: 0;
            background-color: yellow;
            height: 40px;
            z-index: 3
        }
        .yy{
            position: absolute;
            z-index: 2;
            height: 35px;
            width: 8px;
            top: 0;
            right: 0;
            cursor: ew-resize;
        }
        .yy:after{
            content: ' ';
            width: 1px;
            display: block;
            background-color: red;
            height: 40px;
            position: relative;
            left: 4px;
            z-index: 3
            
        }
    </style>
</body>
</html>

ff和chrome都尝试了,均有相同的问题,实在是百思不得其解


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

我猜你的显示器是设置这里不是100%

意思就是你的1px是 显示器物理像素1.5个像素(或者其他带小数的数字)

就会出现你这种情况 如果是1px=1像素或者2像素这种整数倍就没问题

image.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...