html - Chrome Firefox 像素脱离 CSS

Question

因此，过去 6 个月以来我一直在使用 Html5 和 CSS3，但现在才开始在 firefox(17.0.1) 和 chrome(23.0.1271.101) 之间遇到一些像素缺失问题。我有一个我尝试过但没有改变的 CSS 重置。奇怪的是，在 chrome(图片右侧)中它是 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>

任何修复或想法？

谢谢

Answer 1

而不是给 .title:after position:relative，你可以尝试给它 position:absolute;并给出 .title position:relative;

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