如何给 legend 标签设定宽度
作者:blank 来源:怿飞的blog 发布时间:2008-07-26 12:18:00
标签:legend,标签,css
我们在做表单的时候经常会使用到这样的结构:
<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 的兼容其实并不难,多尝试多实践就可以解决,最重要的是自己要去动手,只有动手了才会有更多的收获,才会有更深的印象。
0
投稿
猜你喜欢
- 这篇论坛文章(赛迪网技术社区)着重介绍了有关SQL注入防御的防御策略及实施步骤,详细内容请参考下文:从去年下半年开始,很多网站被损害,他们在
- 认知心理学家Donald A. Norman将人类的行动分解成七个阶段:1. 确定目标2. 确定意图3. 明确行动内容4. 执行5. 感知外
- 只有mdf文件的数据库附加失败的修复 附加时报如下错误: 服务器: 消息 1813,级别 16,状态 2,行 1 未能打开新数据库 '
- SHA (Secure Hash Algorithm,译作安全散列算法) 是美国国家安全局 (NSA) 设计,美国国家标准与技术研
- 本文将介绍PHP中单引号和双引号的区别。PHP中单引号和双引号简介在 PHP 中,我们使用引号来指定值是字符串文字。有两种不同类型的报价。它
- 看了OReilly.JavaScript.The.Definitive.Guide.5th.Edition.Aug.2006里的cookie
- 前两天特意装了一下IETester,用以方便测试,装好后使用发现IE8有两个地方需要大家注意。IE5MAC的过滤器对IE8 Beta 1版同
- 这篇论坛文章(赛迪网技术社区)主要介绍了配置一个高可用性的MySQL服务器负载均衡群集的具体过程,详细内容请参考下文:本文将告诉你如何配置一
- 所有数据库和状态文件都包含在其中。但是,在确定数据目录内容的布局中管理员有某些职责。本文讨论为什么要移动数据目录的各个部分(甚至是字典本身)
- 这些导航菜单来自于Dribbble网站,出自于世界各地的优秀设计师之手,涵盖了各种不同的风格,个个都非常精美。这里我将这些导航菜单展示出来,
- 共4个页面:form.asp; chk.asp; num.asp; count.asp,得到一个随即数字。加密解密后成成XBM图片,利用 s
- <div id="d1"></div> <script > fu
- 偶写的几个ASP字符串处理函数,用于文章分页的小玩意函数名:StrLen作 用:取得字符串长度(汉字为2)参 
- 我对定格动画非常喜爱,也曾经在大学毕业时期制作过一部个人定格动画MV.恰当给CDC博客写文之机,给大家介绍下定格动画,分享下这门独特的拍摄艺
- 百度有啊2009年情人节logo——大纸袋GG给大纸袋MM送了枝玫瑰花,大纸袋MM奖励了大纸袋GG一个吻,好可爱!淘宝网2009年情人节lo
- <% Response.Buffer = True Server.ScriptTimeOut=9999999&
- 相信大家都知道html和css,知道html结构和css表现分离,知道html语义化,这些都是这几年的热门关键字。语义化的html在国内也是
- 在用户研究工作中,如何让自己的数据和结论更有说服力,是很重要的问题。最近将自己积累的用研信度和效度的笔记整理一下,罗列在文中,希望对大家有所
- 在许多网页中,当鼠标移到一张图片上时,又弹出另一张图片,做这种广告条,要用到Macromedia Dr
- 你用过css么?当然,我是指你喜欢做网页的话,用过?很好,那你用过它的特效么?没有?那请跟我来。让我先