Chrome和Firefox CSS邊框問題

嗨我的問題是我的邊框在Firefox和Chrome中顯示。它在Safari中看起來很精緻。Chrome和Firefox CSS邊框問題

小提琴/現場演示這裏：http://jsfiddle.net/hirokotenshi/JhfS8/

在Chrome和Firefox的一個看起來鋸齒狀莫名其妙。
這裏： http://i923.photobucket.com/albums/ad77/Chapter-s/Screenshot2013-03-26at43905PM_zps5d62d1c9.png

我的CSS：

#whatsnew { 
    margin-top: 50px; 
    border: 1px solid #D9D9D9; 
    border-right: 50px solid #d52b1e; 
    padding: 35px; 
    -webkit-font-smoothing: antialiased; 
     font-smoothing: antialiased; 
    font-family: Verdana; 
    padding-top: 20px; 
    padding-bottom: 15px; 
}

任何人都知道如何解決這個問題呢？

來源

2013-03-26 Jos Luciette

你有一個現場演示的鏈接或可能做出[小提琴]（HTTP：// jsfi ddle.net/） – Martyn0627 2013-03-26 09:09:18

@ Martyn0627嘿我沒有現場演示，但我有我的帖子中說明的截圖！ – 2013-03-26 09:13:28

@ Martyn0627哦，我創建了一個小提琴http://jsfiddle.net/hirokotenshi/JhfS8/ – 2013-03-26 09:16:10

這實際上是由設計增添一些填充 - 邊框拐角處斜加入，所以你看到的是右邊框的邊緣逐漸變細以滿足其他1px的邊緣。

我能想到的是使用包裝DIV，運用1px的邊框到，然後保持在內部DIV紅色邊框的最佳解決方案：

HTML：

<div id="wrapper"> 
<div id="whatsnew"> 
    <div id="whatsnewtitle">What's new?</div> 
    <div id="whatsnewcon"> 
    <b>Do you know?</b><br /> 
    <br /> 
    Royal Dutch Shell plc filed its Annual Report on Form 20-F for the year ended December 31, 2012 with the U.S. Securities and Exchange Commission. 
    <br /> 
    <br /> 
    <div style="text-align: right;"> 
    <a href=""><b>Find out more...</b></a> 
    </div> 

    </div> 
</div> 
</div>

CSS：

#wrapper { 
border: 1px solid #D9D9D9; 
margin-top: 50px; 
-webkit-font-smoothing: antialiased; 
    font-smoothing: antialiased; 
font-family: Verdana; 
} 
#whatsnew { 
border-right: 50px solid #d52b1e; 
padding: 35px; 
padding-top: 20px; 
padding-bottom: 15px; 
}

http://jsfiddle.net/JhfS8/1/

（快速和骯髒的劈...）

如果你想避免灰色邊框到包裝的右側，你可以更改爲紅色太：

border-right-color: #d52b1e;

...如果你想成爲真正聰明，你可以使用position: relative和負利潤來「拉」的內部DIV背出了邊界，所以後面的灰色消失紅色：

http://jsfiddle.net/JhfS8/2/

來源

2013-03-26 09:28:45 MassivePenguin

偉大!!它工作!!非常感謝!!這個論壇是真棒謝謝!! – 2013-03-26 09:35:37

很高興幫助:) – MassivePenguin 2013-03-26 09:36:35

-1

嘗試：-webkit-backface-visibility: hidden;或-webkit-transform-style: preserve-3d;或者除了backface-visibility一個

來源

2013-03-26 09:10:44 aNewStart847

試過，它不工作悲傷... – 2013-03-26 09:19:29

編輯答案 – aNewStart847 2013-03-26 09:21:19

仍然沒有幫助:(任何人都可以幫助我嗎？相當重要的項目..需要它看起來整潔!! – 2013-03-26 09:29:40

Chrome和Firefox CSS邊框問題

回答

相關問題