谷歌瀏覽器 - 越野車彎曲的邊界？

我有一個相對定位的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

谷歌瀏覽器 - 越野車彎曲的邊界？

回答

相關問題