如何給 legend 標(biāo)簽設(shè)定寬度

我們?cè)谧霰韱蔚臅r(shí)候經(jīng)常會(huì)使用到這樣的結(jié)構(gòu)：

哪些瀏覽器legend標(biāo)簽設(shè)定的寬度有效

IE6

IE7

Firefox2

Firefox3

Opera9.0+

Safari3.0+

當(dāng)我們使用 CSS 給 legend 標(biāo)簽設(shè)定固定寬度時(shí)：

legend {

background:red;

width:500px;

}

在 IE6、IE7、Opera9.0+、Safari3.0+ 都正能常顯示，而在 Firefox2 和 Firefox3 中寬度卻失效。

在這里我們不去深究為什么，只探討解決的方法：

我們可以通過(guò)在 legend 標(biāo)簽內(nèi)添加一個(gè)標(biāo)簽，并給標(biāo)簽設(shè)定所需要的寬度，此寬度的單位不可為百分比(%):

HTML 修改為：

哪些瀏覽器legend標(biāo)簽設(shè)定的寬度有效

IE6

IE7

Firefox2

Firefox3

Opera9.0+

Safari3.0+

CSS 修改為：

legend span {

background:red;

width:500px;

display:block;

}

可參考：《how to set width of LEGEND tags in FF》

正淳 同時(shí)也提供了另外的一種解決方案，無(wú)需修改結(jié)構(gòu)，僅修改樣式即可：

legend {

background:red;

text-indent:-600px;

padding-left:600px;

/*IE下還原初始方式，只設(shè)定寬度*/

*width:600px;

*text-indent:0;

*padding-left:0;

}

題外話(huà)：CSS 的兼容其實(shí)并不難，多嘗試多實(shí)踐就可以解決，最重要的是自己要去動(dòng)手，只有動(dòng)手了才會(huì)有更多的收獲，才會(huì)有更深的印象

本文作者:相關(guān)閱讀:

php正則表達(dá)式的模式修正符和逆向引用使用介紹

javascript版的日期輸入控件(2)

用VBS實(shí)現(xiàn)監(jiān)視進(jìn)程創(chuàng)建與刪除的代碼

網(wǎng)頁(yè)文字實(shí)現(xiàn)豎排的幾種方法

javascript最常用與實(shí)用的創(chuàng)建類(lèi)的代碼

SupeV影音播客系統(tǒng)SupeV產(chǎn)品特點(diǎn)

Javascript 面向?qū)ο?命名空間

Mysql如何避免全表掃描的方法

基于jquery的jqDnR拖拽溢出的修改

QQ For Linux 1.0 Preview 搶先測(cè)評(píng)

SQL Server數(shù)據(jù)庫(kù)的鎖類(lèi)型總結(jié)

Panel加樣式有時(shí)候無(wú)法浮動(dòng)的問(wèn)題

十天學(xué)會(huì)php之第六天

asp.net下日期加減的方法

總結(jié)

以上是生活随笔為你收集整理的html中legend设置大小,HTML_如何给 legend 标签设定宽度，我们在做表单的时候经常会使 - phpStudy...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。