Span元素的 width属性 无效果原因及解决方案
先運(yùn)行下程序看下:
<span style='background-color:#336699;width:300px;'>123</span>?
輸出:123
可以看到 span會(huì)自動(dòng)根據(jù)包含的內(nèi)容來(lái)變化寬度
這是因?yàn)?對(duì)于內(nèi)聯(lián)元素(可以是默認(rèn)即為內(nèi)聯(lián)的比如 span 元素，也可以是 display: inline 的元素)
width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下觸發(fā) hasLayout 。而對(duì)于 IE6，如果瀏覽器運(yùn)行于標(biāo)準(zhǔn)兼容模式下，內(nèi)聯(lián)元素會(huì)忽略 width 或 height 屬性，所以設(shè)置 width 或 height 不能在此種情況下令該元素具有 layout。
zoom 總是可以觸發(fā) hasLayout，但是在 IE5.0 中不支持。
具有“l(fā)ayout” 的元素如果同時(shí)也 display: inline ，那么它的行為就和標(biāo)準(zhǔn)中所說(shuō)的 inline-block 很類似了：在段落中和普通文字一樣在水平方向和連續(xù)排列，受 vertical-align 影響，并且大小可以根據(jù)內(nèi)容自適應(yīng)調(diào)整。這也可以解釋為什么單單在 IE/Win 中內(nèi)聯(lián)元素可以包含塊級(jí)元素而少出問(wèn)題，因?yàn)樵趧e的瀏覽器中 display: inline 就是內(nèi)聯(lián)，不像 IE/Win 一旦內(nèi)聯(lián)元素?fù)碛?layout 還會(huì)變成 inline-block。
?
解決方法:
<1>去掉ASP.NET頁(yè)面的W3C標(biāo)準(zhǔn)聲明(不推薦):
去掉:<!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>推薦:
如果設(shè)置display:block，width屬性生效，但是此時(shí)的span跟div一樣了。
如果設(shè)置display:inline-block，則span并列在同行，而且width屬性生效。
元素display屬性的常見(jiàn)值說(shuō)明：
block：塊對(duì)象的默認(rèn)值。將對(duì)象強(qiáng)制作為塊對(duì)象呈遞，為對(duì)象之后添加新行。
inline：內(nèi)聯(lián)對(duì)象的默認(rèn)值。將對(duì)象強(qiáng)制作為內(nèi)聯(lián)對(duì)象呈遞，從對(duì)象中刪除行。(內(nèi)聯(lián))
《CSS權(quán)威指南》中文字顯示:任何不是塊級(jí)元素的可見(jiàn)元素都是內(nèi)聯(lián)元素。其表現(xiàn)的特性是“行布局”形式，
這里的“行布局”的意思就是說(shuō)其表現(xiàn)形式始終以行進(jìn)行顯示。
比如，我們?cè)O(shè)定一個(gè)內(nèi)聯(lián)元素border-bottom:1px solid #000;時(shí)其表現(xiàn)是以每行進(jìn)行重復(fù)，每一行下方都會(huì)有一條黑色的細(xì)線。
假如是塊級(jí)元素那么所顯示的的黑線只會(huì)在塊的下方出現(xiàn)。
inline-block：將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。旁邊的內(nèi)聯(lián)對(duì)象會(huì)被呈遞在同一行內(nèi)。
non：隱藏對(duì)象。與 visibility 屬性的hidden值不同，其不為被隱藏的對(duì)象保留其物理空間。
內(nèi)聯(lián)(display:inline;)元素不能設(shè)置寬高，因?yàn)閮?nèi)聯(lián)屬于行布局，其特性是在一行里進(jìn)行布局，所以不能被設(shè)定寬高。
<span style='background-color:#336699;width:300px;display:inline-block;'>123</span>?
輸出:123
?
<3>如果設(shè)置float:left | right,width屬性生效.
(浮動(dòng))他使得指定元素脫離普通的文檔流而產(chǎn)生的非凡的布局特性。并且FLOAT必需應(yīng)用在塊級(jí)元素之上，也就是說(shuō)浮動(dòng)并不應(yīng)用于內(nèi)聯(lián)標(biāo)簽。或者換句話來(lái)說(shuō)當(dāng)應(yīng)用了FLOAT那么這個(gè)元素將被指定為塊級(jí)元素。
<span style='background-color:#336699;width:300px;float:left;'>123</span>?
輸出:123
轉(zhuǎn)載于:https://www.cnblogs.com/tweet/archive/2010/01/15/1648539.html
總結(jié)
以上是生活随笔為你收集整理的Span元素的 width属性 无效果原因及解决方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： C#中的cookie编程
- 下一篇： 汇编语言学习笔记-按指定的字体输出文本