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边框问题

回答

相关问题