0

ピクセルオフ

そのため、私は過去6か月以上Html5とCSS3を使用してきましたが、firefox（17.0.1）とchrome（23.0.1271.101）の間でいくつかのピクセルミスが発生し始めました。試したCSSリセットがありますが、変更はありません。クロム（写真の右側）では2ピクセルで、Firefox（写真の左側）では2ピクセルであるという点で奇妙です。

ここで自分の目で確かめてくださいhttp://jsfiddle.net/976a3/2/

CSS：

body
      {
        margin: 0px 0px 0px 0px;
        background:rgba(75, 75, 75, 1);
        color:#c0c0c0;
      }

#container
  {
    margin:0px auto;
    padding:0px 0px 0px 0px;
    width:300px;
    height:350px;
  }

#contact_info
  {
    margin:0px 0px 0px 75px;
    padding:15px 15px 15px 15px;
    width:270px;
    height:150px;
    border:1px solid black;
    color:black;
    background:rgba(200,200,200,1);
    border-radius:20px;
    box-shadow:7px 7px 12px rgba(0,0,0,1);
  }
.title
  {
    font-size:1.3em;
    margin:-10px 0px 0px -30px;
    padding:4px 0px 0px 10px;
    width: 235px;
    height:30px;
    color:white;
    background:rgba(22,22,22,1);
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    text-shadow:0 0 3px rgba(192, 192, 192, 1);
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.1) inset,
    0 5px 10px rgba(0, 0, 0, 0.5) inset,
    0 4px 6px rgba(255, 255, 255, 0.2) inset,
    1pt 16px 0 -2px rgba(255, 255, 255, 0.2) inset,
    0pt 16px 10px rgba(0, 0, 0, 0.3) inset,
    0pt 1px 0px rgba(0, 0, 0, 0.2);
  }

.title:after
  {
    top:40px;
    left:-163px;
    position:relative;
    z-index:-2;
    content: "";
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 10px solid rgba(22, 22, 22, 1);
  }

HTML：

<div id="container">
    <div id="contact_info">
    <p class="title">CONTACT INFO</p>
    <br />
    </div>
</div>

修正やアイデアはありますか？

ありがとう

4

1 に答える 1

1

を与える代わりに、;.title:after position:relativeを与えてみることができます。position:absoluteそして与える.title position:relative;

http://jsfiddle.net/976a3/3

于 2013-01-09T04:46:25.117 に答える