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 畫面就會正常。真是無言....
張貼者： 李志堅 於 1/18/2011 06:26:00 下午
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)