谷歌浏览器 - 有问题的弯曲边框？答案

【问题标题】：Google Chrome - buggy curved borders?谷歌浏览器 - 有问题的弯曲边框？
【发布时间】：2010-10-08 05:33:36
【问题描述】：

我在宽度为 50% 的居中 div 内有一个相对定位的 div...我的意思是外部的 div 设置为 width: 50% 和 margin-left/right: auto。然后我有另一个带有类 headerContainer 的 div 和另一个带有类标题的 div。标题 div 中有一个带有 headerImg 类的图像。

看起来，当在header div和headerImg img标签上设置一个30px的弧形边框时，两边的边框会出现轻微的重叠……我真的不知道怎么形容……基本上，在谷歌浏览器中，30px 弯曲边框看起来很完美，但有时（大约 3 次中有 2 次或 4 次中有 3 次）它看起来很完美，但是它碰到最右边和最左边的点的边框也延伸了几个像素.两端的最尖端有轻微的倾斜，但除此之外，额外的边框将是直的。如果可以在这里上传图片，那么我会告诉你 - 但它不是，所以我不能不注册一些图片托管网站......

基本上我想知道的是，如果这发生在其他人身上...我知道这只是一件小事 - 但我喜欢我的网站是像素完美的，而不是奇怪的像素在这里不合适还有 - 看起来很糟糕。

反正我的源码如下（我已经尽量简化了……）：

body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    /*background-color: #E7D2B8;*/
    background-color: #eeeeff;
    color: #863F2B;
}
.page-container {
    position: relative;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
.headerContainer {
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    position: relative;
    clear: right;
}
div.header {
    border-top: 2px solid #2e699b;
    border-left: 2px solid #2e699b;
    border-right: 2px solid #2e699b;
    -moz-border-radius-topleft: 30px;
    -webkit-border-top-left-radius: 30px;
    border-top-left-radius: 30px;
    -moz-border-radius-topright: 30px;
    -webkit-border-top-right-radius: 30px;
    border-top-right-radius: 30px;
}
img.headerImg {
    width: 100%;
    -moz-border-radius-topleft: 30px;
    -webkit-border-top-left-radius: 30px;
    border-top-left-radius: 30px;
    -moz-border-radius-topright: 30px;
    -webkit-border-top-right-radius: 30px;
    border-top-right-radius: 30px;
}
form {
    position: relative;
    width: 100%;
    height: 100%;
}
<body>
    <form method="post"> 
        <div class="page-container"> 
            <div class="headerContainer"> 
                <div class="header"> 
                    <img class="headerImg" alt="Header image" src="/Images/header1.png" /> 
                </div> 
                <div class="clear"></div> 
            </div> 
        </div>
    </form>
</body>

任何帮助将不胜感激。

问候，

理查德

PS 如果仍有问题，我稍后会看看如何上传图片。

【问题讨论】：

我看不到您的问题，一切都在使用我的 Google Chrome 6.0.472.53。也许是圆角算法和调整容器的大小导致了......？
我现在已经发布了图片 - 请参阅下面的答案。
已经在我爸爸的网站上发布了代码 - heritageartpapers.com/border-bug.html... 它也出现在那里。您可能需要刷新页面几次才能出现，因为它不会每次都出现。
我不得不按 ctrl-r 几次，但我确实在 chrome 7.0.517.36 beta 上看到了多余的线路问题。对我来说看起来像这样：img831.imageshack.us/img831/4984/captureuri.jpg
是的。就是这样 - 至少现在我知道它不仅仅是我的机器......我已经在 Chrome 论坛上报告了它 - 如果它被普遍注意到，那么我可能很快就会得到答案。

标签： html google-chrome css

【解决方案1】：

您可能正在谈论这个： http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

如果没有，可以举个例子吗？

【讨论】：

我已经把它放在我爸爸的网站上 - 但请注意它不会出现在这个域上（即不要去寻找它来查看源代码） - 它在本地网站上。 heritageartpapers.com/images/chrome-long-border.png
我刚刚想到它可能是什么 - 如果我在将边框设置为它应该显示的半径之前将边框设置为其他半径，那么它设置了两次边框而不是清除第一个边界...看看。
好吧，这不是——但是，如果我将 headerImg 向下移动 10px（通过将 padding-top: 10px 应用于 div.header），那么长边框将停止显示，并且 div 的顶部边框的末端。标题与侧面不符。如果我将 padding-top: 20px 应用于 div.header ，那么边框每次都会完美显示。我只是不明白这个......
已经在我爸爸的网站上发布了代码 - heritageartpapers.com/border-bug.html... 它也出现在那里。您可能需要刷新页面几次才能出现，因为它不会每次都出现。

【解决方案2】：

嗯，我已经解决了这个问题。标题现在只有文本，没有顶部边框，也没有任何弯角。问题仍然存在，但我正在回避它。我使用了背景图片而不是标题图片。

我会将其标记为答案 - 即使它实际上并不能解决问题。不过谷歌浏览器上已经报道过。

【讨论】：