0

嗨，我在 Firefox 和 Chrome 中显示边框时遇到了这个问题。它在 Safari 中看起来不错。

小提琴/现场演示：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;
}

任何人都知道我该如何解决这个问题？

4

2 回答 2

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负边距将内部 div '拉'出边框，所以灰色消失在红色后面：

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

于 2013-03-26T09:28:45.580 回答
-1

尝试：-webkit-backface-visibility: hidden;或-webkit-transform-style: preserve-3d;或添加一些填充除了backface-visibility一个

于 2013-03-26T09:10:44.923 回答