0
所以我一直在使用HTML5和CSS3爲過去6個月+，但剛纔開始運行到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>
任何修復或想法？
感謝
而不是給.title僞：位置後：相對的，你可以嘗試給它的位置是：絕對的;並給予。標題位置：相對;那樣你就知道這個定位肯定是相對於那個元素的。適用於Chrome ...你可以在FF中測試嗎？ http://jsfiddle.net/976a3/3/ – skyline3000
Yup在FF XD看起來不錯我不知道這是我一直在做錯什麼，因爲我認爲位置是遺傳的...所以我應該總是相對絕對或絕對與絕對。既然你必須有位置才能使z-index工作。 – hobbywebsite
實際上位置不是繼承的......有一個「繼承」值，但默認實際上是「靜態的」。看到這裏：https://developer.mozilla.org/en-US/docs/CSS/position如果你絕對或相對的位置，它被定位到它的第一個非靜態父。 – skyline3000