首页 文章

Chrome滚动条重叠div边框1个像素

提问于
浏览 次
7

在Chrome 33.0.1750.146 m中，当具有1像素边框和滚动条的div具有小数宽度（<100％）的另一个div内的小数像素宽度（小数部分> = 0.5）时，右侧边界有时是隐藏的，取决于四舍五入 . 这似乎是因为滚动条的位置和div的右侧在不同的方向上被舍入，导致滚动条与div的右侧重叠一个像素 .

这是一个已知的错误还是有解决方法？我在PhpBB模板页面中遇到了这个图形故障，其中内容居中并且自动计算宽度，这导致了一个--- .5px宽度div，我将其追溯到以下最小可重复样本：

HTML ：

<div id="wrapper">
    <div class="box">
        <p>Test content</p>
        <p>Test content</p>
        <p>Test content</p>
        <p>Test content</p>
    </div>
</div>

CSS ：

.box {
    height: 100px;
    overflow: auto;
    border: 1px solid;
}

#wrapper {
    max-width: 75%;
    margin: auto;
}

示例JSFiddle - 调整窗口大小并观察右边界闪烁/出现/消失 .

css google-chrome

2 回答

  • 1

    编辑：正如下面Rohrbs所指出的，我的原始答案似乎不起作用！一个可能的解决方案似乎是完全删除边框并添加 box-shadow: 0 0 0 1px #000; . 根据您的浏览器支持要求，这可以帮助您实现所需 .

    更换保证金：自动;填充：0 12.5％;在#wrapper似乎解决了这个问题 . 不确定保证金自动对您的具体情况有多重要 .

    http://jsfiddle.net/zHh4c/7/

    回复于
  • 0

    我有类似的问题 . 我有div的滚动条和border-right设置为2px，当我调整窗口大小时我有滚动条或者结果没有结果我在滚动条打开时有1px边框而在没有滚动条时有2px .

    我通过添加 3px 边框和设置来修复它：

    overflow-y: scroll;

    因此滚动条始终可见，边框始终为2px可见宽度 .

    回复于

相关问题