0

こんにちは、FirefoxとChromeで境界線が表示されるという問題があります。SafariではFINEに見えます。

ここでフィドル/ライブデモ：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;または、または1つ-webkit-transform-style: preserve-3d;に加えていくつかのパディングを追加しますbackface-visibility

于 2013-03-26T09:10:44.923 に答える