Firefox的一個Bug

我想應該是Bug吧,因為我用Safari和Opera都沒這問題,會發現這問題是SixApartyDSF那裡來的構想,想利用:before:after兩個物件的背景圖來製造圓角,沒想到在一些狀況下,:after沒辦法貼齊底端,會有±1px的誤差。

ex1 ex2

上面兩個例子分別是+1px和-1px的狀況,我把出問題的地方放大抓圖下來,Mac版上雖然看不出問題,不過其實也是會發生的,HTML code如下:

<div>
<p>A</p>
</div>

<div>
<p>B</p>
</div>

<div>
<p>C</p>
</div>

CSS code如下:

html, body
{
	background: #66f;
}

div
{
	color: #fff;
	background: #000;
	border: 1px solid #fff;
	margin: 0.5em 0;
}

div:before, div:after
{
	display: block;
	content: " ";
	background: #f99;
	height: 10px;
	width: 100%;
}

p
{
	margin: 0.72em 0;
	color: #fff;
	font-size: 90%;
}

兩個例子的差異只有p標籤的margin而已,想親自看看的可以點下面的連結:範例一範例二

補充:經moztw網友告知,用了Deep Park Alpha2做測試,問題似乎已經修正了。

comments powered by Disqus