在做页面是有时候会用到分割线 hr,但是在 ie6 和 ie7 下显示很蛋疼,本文将教你如何写出兼容各浏览器的 hr。

首页我们先了解下 hr 在各浏览器下的差异,如下表格:

  正常浏览器 ie6、ie7 firefox
实际高度 height+border height height
背景色 background-color background-color(当高度 <= 2px 时,显示高度背景色为灰色,需要 color 来设置颜色) background-color

比如想创建一个实际高度为 3px,边框为 1px,边框颜色为 #07f,背景色为 #f60 的分割线:

hr{
height:1px;
background-color:#f60;
border:1px solid #000;
*height:3px;/* for ie6 ie7 */
color:#f60;/* for ie6 ie7 */
}
@-moz-document url-prefix(){ hr{height:3px;}} /* for firefox */

原文地址:http://sofi.sh/1328

【css】关于 hr 在各浏览器中的问题的更多相关文章

  1. CSS - Select 标签在不同浏览器中的高度设置

    当使用Select标签时,在不同浏览器中显示的高度不同,如何解决此问题: 解决方法链接:http://stackoverflow.com/questions/20477823/select-html- ...

  2. css控制背景图片在浏览器中居中,下拉浏览器的时候背景图一直不变

    如 http://www.gm.com/ css样式如下 ;;} #con{ position:absolute; ; ; height:100%; width:100%; background-im ...

  3. 浏览器中CSS的BUG

    对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. 其它请参考:CSS hack 针对IE6,IE7,fir ...

  4. css在各浏览器中的兼容问题

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...

  5. 清除css、javascript及背景图在浏览器中的缓存

    在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...

  6. 【Web前端】清除css、javascript及背景图在浏览器中的缓存

    在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...

  7. 避免css中文字体在浏览器中解析成乱码

    许多童鞋在写CSS的时候,设置中文字体常常使用中文字符,例如font-family:”黑体”,这样我们在浏览器中看到的是什么样子的呢 ? 如果不想自己写的界面在浏览器字体声明上有异常,建议在书写css ...

  8. DIV+CSS在不同浏览器中的表现

     在给员工培训DIV+CSS的过程中.他们向我提出了非常多问题,有些问题我自己也没有想到过于是抽了些时间自己进行了一番实验,所有实验在IE7和Firefox中进行: 实验一.假设一个div没有指定 ...

  9. js 如何在浏览器中获取当前位置的经纬度

    这个有一定的误差哈,具体的误差是多少,有兴趣的朋友可以去测试下 直接上代码 index.html页面代码: <html> <head lang="en"> ...

随机推荐

  1. hive元数据研究

    hive的元数据存放在关系型数据库中,元数据中存储了hive中所有表格的信息,包括表格的名字,表格的字段,字段的类型,注释.这些信息分散的存放在各个表中,给定一个hive中的表格名字,查询这个表中含有 ...

  2. ELK收集mysql_slow.log

    关于慢查询的收集及处理也耗费了我们太多的时间和精力,如何在这一块也能提升效率呢?且看本文讲解如何利用ELK做慢日志收集. ELK 介绍 ELK 最早是 Elasticsearch(以下简称ES).Lo ...

  3. struts2:在Action中使用Servlet的API,设置、读取各种内置对象的属性

    有两种方式可以实现在Action中使用Servlet的API.一种是使用org.apache.struts2.ServletActionContext类,另一种是使用com.opensymphony. ...

  4. jQuery学习笔记(jquery.validate插件)

    jquery.validate官网地址:http://jqueryvalidation.org/ 1. 导入JavaScript库 <script src="../js/jquery. ...

  5. 【Android】2.0 第2章 初识Android App

    分类:C#.Android.VS2015:  创建日期:2016-02-04 一.认识Android操作系统 Android最早由安迪•罗宾(Andy Rubin)创办,2007年被Google公司收 ...

  6. Merge into 详细介绍

    /*Merge into 详细介绍 MERGE语句是Oracle9i新增的语法,用来合并UPDATE和INSERT语句. 通过MERGE语句,根据一张表或子查询的连接条件对另外一张表进行查询, 连接条 ...

  7. My new English

    作为一个程序员,不管你觉得是高端大气上档次,还是低调奢华有内涵.有一点不能否认,就是英语对于一个爱学习.想不断提高自己的程序员来说是非常重要的.不管是看英文文档,看英文的视频资料,还是想出国工作,与全 ...

  8. git报错之index.lock

    当想回退到某个版本的时候,用git reset --hard commit_id,发现报错,原因是.git目录下多了个index.lock文件,可以通过rm命令删除,然后再回退 rm -f ./.gi ...

  9. (转)如何修复ubuntu的UEFI引导

    (转自: http://jingyan.baidu.com/article/335530da883e0b19cb41c325.html)(ps: 完美的解决了我的问题.) 最近有些手贱,偏偏要进入BI ...

  10. 解决最小化安装Centos7后无法上网的问题,以及安装成功后的基本配置

    发现问题 刚装完最小化的系统后,如果直接ping外网,可能回出现如下情况 解决问题 首先编辑虚拟机的DHCP池: 在弹出的“虚拟网络编辑器”窗口中选择NAT模式的,编辑为其分配地址池: 然后编辑网卡的 ...