Question

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

看起来，当标题div和headerImg img标签上设置了30px的弯曲边框时，两边都会出现边框的轻微重叠......我真的不知道如何描述它...基本上，在谷歌浏览器中，30px弯曲边框看起来很完美，但有时（大约2个中的3个或3个中的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如果仍然存在问题，我会看到我可以做些什么来上传图片。

Answer 1

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

如果没有，可以展示一个例子吗？

Answer 2

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

我会将此标记为答案 - 即使它实际上并未解决问题。谷歌Chrome浏览器已有报道。

Google Chrome - 越野车弯曲的边框？

2 个答案: