|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。
原文:http://www.planabc.net/2008/07/24/legend_width/
我们在做表单的时分常常会利用到如许的布局:
<fieldset>
<legend>哪些扫瞄器legend标签设定的宽度无效</legend>
<inputtype="checkbox"value="ie6"name="width"id="ie6"checked="checked"/><labelfor="ie6">IE6</label>
<inputtype="checkbox"value="ie7"name="width"id="ie7"checked="checked"/><labelfor="firefox">IE7</label>
<inputtype="checkbox"value="firefox2"name="width"id="firefox2"/><labelfor="firefox2">Firefox2</label>
<inputtype="checkbox"value="firefox3"name="width"id="firefox3"/><labelfor="firefox3">Firefox3</label>
<inputtype="checkbox"value="opera"name="width"id="opera"checked="checked"/><labelfor="opera">Opera9.0+</label>
<inputtype="checkbox"value="safari"name="width"id="safari"checked="checked"/><labelfor="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>
<inputtype="checkbox"value="ie6"name="width"id="ie6"checked="checked"/><labelfor="ie6">IE6</label>
<inputtype="checkbox"value="ie7"name="width"id="ie7"checked="checked"/><labelfor="firefox">IE7</label>
<inputtype="checkbox"value="firefox2"name="width"id="firefox2"/><labelfor="firefox2">Firefox2</label>
<inputtype="checkbox"value="firefox3"name="width"id="firefox3"/><labelfor="firefox3">Firefox3</label>
<inputtype="checkbox"value="opera"name="width"id="opera"checked="checked"/><labelfor="opera">Opera9.0+</label>
<inputtype="checkbox"value="safari"name="width"id="safari"checked="checked"/><labelfor="safari">Safari3.0+</label>
</fieldset>
CSS修正为:
legendspan{
background:red;
width:500px;
display:block;
}
可参考:《howtosetwidthofLEGENDtagsinFF》
正淳同时也供应了别的的一种办理计划,无需修正布局,仅修正款式便可:
legend{
background:red;
text-indent:-600px;
padding-left:600px;
/*IE下复原初始体例,只设定宽度*/
*width:600px;
*text-indent:0;
*padding-left:0;
}
题外话:CSS的兼容实在其实不难,多实验多理论就能够办理,最主要的是本人要往下手,只要下手了才会有更多的劳绩,才会有更深的印象。
网上冲浪无论你用InternetExplorer还是NetscapeNavigator,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。 |
|