如何給 legend 標簽設定寬度

我們在做表單的時候經常會使用到這樣的結構：

哪些瀏覽器legend標簽設定的寬度有效

IE6

IE7

Firefox2

Firefox3

Opera9.0+

Safari3.0+

當我們使用 CSS 給 legend 標簽設定固定寬度時：

legend {

background:red;

width:500px;

}

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

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

我們可以通過在 legend 標簽內添加一個標簽，并給標簽設定所需要的寬度，此寬度的單位不可為百分比(%):

HTML 修改為：

哪些瀏覽器legend標簽設定的寬度有效

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》

正淳 同時也提供了另外的一種解決方案，無需修改結構，僅修改樣式即可：

legend {

background:red;

text-indent:-600px;

padding-left:600px;

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

*width:600px;

*text-indent:0;

*padding-left:0;

}

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

本文作者:相關閱讀:

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

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

用VBS實現監視進程創建與刪除的代碼

網頁文字實現豎排的幾種方法

javascript最常用與實用的創建類的代碼

SupeV影音播客系統SupeV產品特點

Javascript 面向對象 命名空間

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

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

QQ For Linux 1.0 Preview 搶先測評

SQL Server數據庫的鎖類型總結

Panel加樣式有時候無法浮動的問題

十天學會php之第六天

asp.net下日期加減的方法

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。