2011年1月18日 星期二

讓 <span> 可以設定寬度

指定了寬度給 <span> ,沒想到竟然一點效果也沒有。後來經高人指點後,原來還要搭配 float:left 的樣式,才會正常。但實際上的頁面並非只有一個<span>而已,加上 float 之後,會讓其他原本正常的頁面排版出現怪異的行為。後來發現,還有另一個樣式要一起使用,clear:left。也就是說,當你希望頁面上的某個區塊呈現浮動效果時,可以使用 float,但後面的部份,如果不再需要浮動效果時,則記得用 clear 來停止。

測試程式如下:

<html>
<head>
<style>
.sp
{
  float:left;
  width:20px;
  border-style:none;
  background-color:red;

}
.full
{
  float:left;
  width:60px;
  border-style:none;
  background-color:yellow;

}

.myDiv
{
clear:left;
}

</style>
</head>
<body>

<div class="myDiv"><span  class="full" >第一行</span></div>
<div class="myDiv"><span class="sp">1</span><span class="sp">2</span><span class="sp">3</span></div>
<div class="myDiv"><span  class="full" >最末行</span></div>
</body>
</html>
在 FireFox , Chrome 呈現的結果是正確的,但在 IE 就會出現一個很討厭的小地方,就是每一個 Div 的行距空白空的很明顯,如下圖。在 FireFox 與 Chrome 並不會出現空白。

為了解決 IE 這問題,在網路上找到可以用 display:inline 這樣式來處理。果真,IE 可以透過 display:inline 來解決,但...現下又換成 FireFox 、 Chrome 不行了。很想哭...

在「解決IE6、IE7、IE8、Firefox CSS兼容性的 Hack 写法」提出了解決不同瀏覽器處理 CSS 的作法,於是我讓 display:inline 只讓 IE 去使用,其他瀏覽器不准。這樣,還真的完整地把問題告一段落了。

最後修改的程式:

<html>
<head>
<style>
.sp
{
  float:left;
  width:20px;
  border-style:none;
  background-color:red;

}
.full
{
  float:left;
  width:60px;
  border-style:none;
  background-color:yellow;

}

.myDiv
{
clear:left;
*display:inline; //只針對 IE
}

</style>
</head>
<body>

<div class="myDiv"><span  class="full" >第一行</span></div>
<div class="myDiv"><span class="sp">1</span><span class="sp">2</span><span class="sp">3</span></div>
<div class="myDiv"><span  class="full" >最末行</span></div>
</body>
</html>

補充:
20110708
遇到一個特別的情況,當內容有中文時,IE8畫面顯示會不正常,但 FireFox,Chrome 可以。如果都是英文,則 IE 就正常了。因緣際會的看到 「IE在CSS中的因中文字體的錯誤」,試著也將 style 加上 「style='font-family:細明體'」 的設定,則 IE8 畫面就會正常。真是無言....

沒有留言:

張貼留言