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