css中 Span 元素的 width 屬性無效果原因及多種解決方案

來源:互聯網
上載者:User

先運行下程式看下: <span style='background-color:#336699;width:300px;'>123</span> 

輸出:123

可以看到 span會自動根據包含的內容來變化寬度

這是因為:對於內嵌元素(可以是預設即為內聯的比如 span 元素,也可以是 display: inline 的元素) width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下觸發 hasLayout 。而對於 IE6,如果瀏覽器運行於標準相容模式下,內嵌元素會忽略 width 或 height 屬性,所以設定 width 或 height 不能在此種情況下令該元素具有 layout。 zoom 總是可以觸發 hasLayout,但是在 IE5.0 中不支援。

具有“layout” 的元素如果同時也 display: inline ,那麼它的行為就和標準中所說的 inline-block 很類似了:在段落中和普通文字一樣在水平方向和連續排列,受 vertical-align 影響,並且大小可以根據內容自適應調整。這也可以解釋為什麼單單在 IE/Win 中內嵌元素可以包含區塊層級元素而少出問題,因為在別的瀏覽器中 display: inline 就是內聯,不像 IE/Win 一旦內嵌元素擁有 layout 還會變成 inline-block。

解決方案:

<1>去掉ASP.NET頁面的W3C標準聲明(不推薦):

去掉:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <span style='background-color:#336699;width:300px;'>123</span> 

 

<2>推薦:

如果設定display:block,width屬性生效,但是此時的span跟div一樣了。 如果設定display:inline-block,則span並列在同行,而且width屬性生效。

元素display屬性的常見值說明:

block:塊對象的預設值。將對象強製作為塊對象呈遞,為對象之後添加新行。 inline:內聯對象的預設值。將對象強製作為內聯對象呈遞,從對象中刪除行。(內聯)

《CSS權威指南》中文字顯示:任何不是區塊層級元素的可見元素都是內嵌元素。其表現的特性是“行布局”形式,

這裡的“行布局”的意思就是說其表現形式始終以行進行顯示。

比如,我們設定一個內嵌元素border-bottom:1px solid #000;時其表現是以每行進行重複,每一行下方都會有一條黑色的細線。

假如是區塊層級元素那麼所顯示的的黑線只會在塊的下方出現。 inline-block:將對象呈遞為內聯對象,但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內。 non:隱藏對象。與 visibility 屬性的hidden值不同,其不為被隱藏的對象保留其物理空間。

內聯(display:inline;)元素不能設定寬高,因為內聯屬於行布局,其特性是在一行裡進行布局,所以不能被設定寬高。 <span style='background-color:#336699;width:300px;display:inline-block;'>123</span> 

輸出:123

 

<3>如果設定float:left | right,width屬性生效.

(浮動)他使得指定元素脫離普通的文檔流而產生的非凡的布局特性。並且FLOAT必需應用在區塊層級元素之上,也就是說浮動並不應用於內聯標籤。或者換句話來說當應用了FLOAT那麼這個元素將被指定為區塊層級元素。 <span style='background-color:#336699;width:300px;float:left;'>123</span> 

輸出:123

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.