兼容浏览器的完美hr:
height:1px;border:none;border-top:1px solid Black;margin:0;*margin:0 0 -14px 0;float:none;*float:left;display:block;
1.hr元素是一个块级元素,是一个box,有border
2.高度:size和style.height.
ie和firefox对size解释和计算是不同的,所以最好不用size,用height,但是会出现一个有边框的box,所以将border:none.
firefox下用了size就是实心的box,不用就是一个普通的块级元素。
3.颜色:color和style.border-color
height如果不大于2px是看不出这两个属性的区别的。
firefox:color=border-color,高度大于2的时候,会出现一个空心的box。
IE:对border-color不识别,要使用border:1px solid Black;
4.边距
hr在firefox下没有默认边距(即使有用margin:0也可以将其消除)
hr在ie下有默认的上边距14px和下边距14px(即使将margin:0),用float来消除margin-top(请用*float,或者用width然后再float.)
然后在使用css hack对ie设置一个margin-bottom:-14px,这样下面的元素就会上移14px,就好像把hr下面的边距消除了一下。
ps:hr在firefox下居然是圆角的,而且如果将hr的高和宽设置相同的值,就可以得到一个圆(实心或空心)哦。
其实是将hr当成一个div还使用了,而且还是一个不同浏览器解析起来有很大差异的诡异的div,所以使用hr还不如直接用div的border。
在项目的好几个页面里用到了hr,想用它做成一条灰色的分隔线,结果发现了些很诧异的:
我把hr写到一对<td></td>标签中: <td><hr style="....."></td>
firefox下没有默认的上、下、左、右边距,
于是在<hr style="width:140px; height:1px; color:#F2F2F2; border:0; background:#F2F2F2; ">后加了段:
margin-left:22px !important; //firefox
>margin-left:0px !important; //ie7
margin-left:0px; //ie6 左边距
margin-top:7px !important; >margin-top:0px !important; margin-top:0px;
margin-bottom:7px !important; >margin-bottom:0px !important; margin-bottom:0px;
来调整ff左、上、下边距的问题
此时在IE和FireFox下都OK了,达到了预想的那样,可想着多处用到这个样式,也好便于以后修改,就放到css.css文件里: hr{这段样式设置代码} 再来浏览,问题就来了 IE和FireFox下却都没有效果了,即使给hr 加上id 或是class选择器也没有生效。 真不知怎了? 若谁路过 指教指教
height:1px;border:none;border-top:1px solid Black;margin:0;*margin:0 0 -14px 0;float:none;*float:left;display:block;
1.hr元素是一个块级元素,是一个box,有border
2.高度:size和style.height.
ie和firefox对size解释和计算是不同的,所以最好不用size,用height,但是会出现一个有边框的box,所以将border:none.
firefox下用了size就是实心的box,不用就是一个普通的块级元素。
3.颜色:color和style.border-color
height如果不大于2px是看不出这两个属性的区别的。
firefox:color=border-color,高度大于2的时候,会出现一个空心的box。
IE:对border-color不识别,要使用border:1px solid Black;
4.边距
hr在firefox下没有默认边距(即使有用margin:0也可以将其消除)
hr在ie下有默认的上边距14px和下边距14px(即使将margin:0),用float来消除margin-top(请用*float,或者用width然后再float.)
然后在使用css hack对ie设置一个margin-bottom:-14px,这样下面的元素就会上移14px,就好像把hr下面的边距消除了一下。
ps:hr在firefox下居然是圆角的,而且如果将hr的高和宽设置相同的值,就可以得到一个圆(实心或空心)哦。
其实是将hr当成一个div还使用了,而且还是一个不同浏览器解析起来有很大差异的诡异的div,所以使用hr还不如直接用div的border。
在项目的好几个页面里用到了hr,想用它做成一条灰色的分隔线,结果发现了些很诧异的:
我把hr写到一对<td></td>标签中: <td><hr style="....."></td>
firefox下没有默认的上、下、左、右边距,
于是在<hr style="width:140px; height:1px; color:#F2F2F2; border:0; background:#F2F2F2; ">后加了段:
margin-left:22px !important; //firefox
>margin-left:0px !important; //ie7
margin-left:0px; //ie6 左边距
margin-top:7px !important; >margin-top:0px !important; margin-top:0px;
margin-bottom:7px !important; >margin-bottom:0px !important; margin-bottom:0px;
来调整ff左、上、下边距的问题
此时在IE和FireFox下都OK了,达到了预想的那样,可想着多处用到这个样式,也好便于以后修改,就放到css.css文件里: hr{这段样式设置代码} 再来浏览,问题就来了 IE和FireFox下却都没有效果了,即使给hr 加上id 或是class选择器也没有生效。 真不知怎了? 若谁路过 指教指教