Chrome и Firefox border border

Question

Привет, У меня есть эта проблема, когда моя граница отображается в Firefox и Chrome. Он выглядит FINE в Safari.

Fiddle/демо здесь: 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; 
} 

Каждый знает, как я могу решить эту проблему?

Answer 1

Это на самом деле дизайн - границы соединяются по диагонали в углах, так что вы видите, это край правой границы сужающимся для удовлетворения других краев 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 и отрицательные поля к «тянуть» внутренний сНу обратно через границу, так что серый цвет исчезает за красный:

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

Answer 2

Try: -webkit-backface-visibility: hidden; или -webkit-transform-style: preserve-3d; или добавить отступы в дополнении к backface-visibility один