2

我遇到了一个让我目瞪口呆的问题...我尝试使用 css 'right: 0px' 将元素定位在页面的绝对右侧。但似乎我的元素实际上被放置在比预期更右几个像素的位置，我丢失了其中的一部分。

为了解决这个问题，我将我的案例简化为下面的 HTML。

看起来宽度为 100% 的元素（也是主体！）实际上比视口更宽（但正在触发 scollbars）。我傻眼了..我在这里俯瞰什么？

<!DOCTYPE html>
<HTML>
<head>
    <STYLE>

        body{
            overflow: auto;
        }

        #div1{
            position:       absolute;
            top:            50px;
            left:           0px;
            width:          100px;
            height:         145px;
            background-color:   red;
        }

        #div2{
            position:       absolute;
            top:            250px;
            left:           0px;
            width:          100%;
            height:         145px;
            background-color:   red;
        }

        .block{
            position:       absolute;
            width:          30px;
            height:         20px;
            background-color:   yellow;
        }

        .sub0{top:0px; right:0px;}
        .sub1{top:25px; right:1px;}
        .sub2{top:50px; right:2px;}
        .sub3{top:75px; right:3px;}
        .sub4{top:100px; right:4px;}
        .sub5{top:125px; right:5px;}


    </STYLE>

<body>


    <div ID="div1"> 

        <div class="block sub0">0PX</div>
        <div class="block sub1">1PX</div>
        <div class="block sub2">2PX</div>
        <div class="block sub3">3PX</div>
        <div class="block sub4">4PX</div>
        <div class="block sub5">5PX</div>

    </div>

    <div ID="div2"> 

        <div class="block sub0">0PX</div>
        <div class="block sub1">1PX</div>
        <div class="block sub2">2PX</div>
        <div class="block sub3">3PX</div>
        <div class="block sub4">4PX</div>
        <div class="block sub5">5PX</div>

    </div>


</body>

</HTML>
4

1 回答 1

0

好吧，很抱歉打扰你了……问题太傻了，我想把头撞在墙上……

经过更多研究后，问题似乎只出现在我的双显示器设置的左侧显示器上的最大化浏览器窗口上......

显示器的“自动调整”解决了它...不再丢失正确的 2 个像素...

呃！

于 2012-07-31T13:42:52.527 回答