谷歌浏览器 - 越野车弯曲的边界？

我有一个相对定位的div在宽50％的居中div ...我的意思是外部的一个设置为宽度：50％和margin-left/right：auto。然后我有另一个div headerContainer类和另一个类头。头div中有一个带有headerImg类的图像。谷歌浏览器 - 越野车弯曲的边界？

看起来，当在标题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我会看看我能做些什么关于以后的图片上传，如果它仍然是一个问题。

来源

2010-10-08 ClarkeyBoy

我看不到您的问题，所有这些都与我的Google Chrome 6.0.472.53一起工作。也许这是圆角算法和调整容器，导致.. ..？ – MatTheCat 2010-10-08 07:31:05

我已经发布了图片 - 请参阅下面的答案。 – ClarkeyBoy 2010-10-08 13:47:20

已将代码发布在我的爸爸网站上 - http：//www.heritageartpapers.com/border-bug.html ...它也发生在那里。您可能必须刷新页面几次才会发生，因为它不会每次都发生。 – ClarkeyBoy 2010-10-08 14:15:54

那么我有种解决了这个问题。标题现在只有文本，没有上边框，也没有任何弯曲的边角。问题仍然存在，但我躲过了它。我使用了背景图片而不是标题图片。

我会将此标记为答案 - 尽管它并未真正解决问题。尽管Google Chrome已经有报道。

来源

2010-10-11 17:53:01 ClarkeyBoy

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

如果不是，可以显示一个例子吗？

来源

2010-10-08 08:43:33 pleunv

我已经把它放在我的爸爸网站上 - 但请注意，它不会出现在这个域名上（即不要去寻找它的源代码） - 它在本地网站上。 http://www.heritageartpapers.com/images/chrome-long-border。png – ClarkeyBoy 2010-10-08 13:44:51

刚才我想到它可能是什么 - 它可能是如果我将边框设置为其他半径之前，将其设置为它应该显示的半径，所以它将边框设置两次，而不是清除第一个边框。将只是看看。 – ClarkeyBoy 2010-10-08 13:48:18

确定它不是 - 但是如果我将headerImg向下移动10px（通过应用padding-top：10px到div.header），那么长边框将停止显示，并且div.header的上边框的末端与两侧。如果我将padding-top：20px应用于div.header，则边框每次都会显示完美。我只是没有得到这... – ClarkeyBoy 2010-10-08 13:57:59

谷歌浏览器 - 越野车弯曲的边界？

回答

相关问题