0

像素关闭

所以在过去的 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>

任何修复或想法？

谢谢

4

1 回答 1

1

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

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

于 2013-01-09T04:46:25.117 回答