当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > CSS教程：legend标签设定宽度的技巧

HTML/XHTML教程
CSS基础：设计网页常用规范详解
CSS教程：十步学会用css建站
CSS基础：24条网页布局开发小技巧
CSS教程：在网页布局中简单实现垂直居中的办法
css基础教程：颜色和文本属性的控制
专家总结：网页设计师必须遵守的十条守则
html技巧：超级链接a的提示和打开方式
css教程：学习背景图像属性background
例说网页Semantics：Html/Xhtml是否真正符合标准
IE7与web标准设计系列教程：前言
IE7与web标准设计系列教程：更丰富的CSS选择符
IE7与web标准设计系列教程：修正引起页面布局混乱的祸首
web标准教程：IE6和IE7的共存
web标准：IE多版本共存的解决方案：IETester
CSS基础教程：认识CSS选择符
web标准：比较IE6与IE7，放纵的孩子与严厉的父亲
学好标准CSS的模型是否必须放弃IE？
CSS教程：如何处理有冲突的CSS规则
教你用html和css写出漂亮正规的Blog
CSS基础：如何避免table强迫症

No. « 61 62 63 64 »

技术文章搜索

关键字

HTML/XHTML教程 中的 CSS教程：legend标签设定宽度的技巧

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-11-04   浏览: 35 ::
收藏到网摘: n/a

我们在做表单的时候经常会使用到这样的结构：

<fieldset>
    <legend>哪些浏览器legend标签设定的宽度有效</legend>
    <input type="checkbox" value="ie6" name="width" id="ie6" checked="checked" /><label for="ie6">IE6</label>
    <input type="checkbox" value="ie7" name="width" id="ie7"checked="checked" /><label for="firefox">IE7</label>
    <input type="checkbox" value="firefox2" name="width" id="firefox2" /><label for="firefox2">Firefox2</label>
    <input type="checkbox" value="firefox3" name="width" id="firefox3" /><label for="firefox3">Firefox3</label>
    <input type="checkbox" value="opera" name="width" id="opera" checked="checked" /><label for="opera">Opera9.0+</label>
    <input type="checkbox" value="safari" name="width" id="safari"checked="checked" /><label for="safari">Safari3.0+</label>

 </fieldset> 当我们使用 CSS 给 legend 标签设定固定宽度时：

legend {
    background:red;
    width:500px;
}

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

在这里我们不去深究为什么，只探讨解决的方法：

我们可以通过在 legend 标签内添加一个标签，并给标签设定所需要的宽度，此宽度的单位不可为百分比（%）:

HTML 修改为：

<fieldset>
    <legend><span>哪些浏览器legend标签设定的宽度有效</span></legend>
    <input type="checkbox" value="ie6" name="width" id="ie6" checked="checked" /><label for="ie6">IE6</label>
    <input type="checkbox" value="ie7" name="width" id="ie7"checked="checked" /><label for="firefox">IE7</label>
    <input type="checkbox" value="firefox2" name="width" id="firefox2" /><label for="firefox2">Firefox2</label>
    <input type="checkbox" value="firefox3" name="width" id="firefox3" /><label for="firefox3">Firefox3</label>
    <input type="checkbox" value="opera" name="width" id="opera" checked="checked" /><label for="opera">Opera9.0+</label>
    <input type="checkbox" value="safari" name="width" id="safari"checked="checked" /><label for="safari">Safari3.0+</label>
</fieldset>

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 的兼容其实并不难，多尝试多实践就可以解决，最重要的是自己要去动手，只有动手了才会有更多的收获，才会有更深的印象。