hr标签,相信大家都能熟悉,我们一般用它来产生横线的效果。我们可以对它定义“颜色”、“高度”、“宽度”、“边框”等样式。

  在此只讨论“颜色”和“边框”对于不同版本浏览器的兼容性。

颜色:

  火狐、IE7+=  :通过background-color来指定。

  IE6-=  :通过color指定。

  方案:要为hr指定颜色,同时使用background-color和color。

边框:

  IE7+=  :如不指定border:none,那么浏览器默认会为hr加上一定宽度的边框。

  IE6-=  :浏览器默认不会为其加上边框。

  方案:显示申明border:none。

<style type="text/css">
hr{
border:none;
background-color:#060;
color:#060;

height:2px;
width:80%;
}
</style>

关于hr标签兼容个浏览器的代码的更多相关文章

  1. 加入收藏夹的js代码(求兼容chrome浏览器的代码)

    从网上找了加入收藏夹的js代码,但不兼容chrome,不知道有没有兼容chrome的相关代码,希望有知道的告诉一下,谢谢! 代码如下 $("#id").click(function ...

  2. 让HTML5语义化标签兼容IE浏览器

    解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位) <script> var html5 ...

  3. 1像素HR技巧(兼容各浏览器)

    hr{color:#ccc;height:1px;border:0px;border-top:1px solid #ccc;margin:0px;padding:0px;overflow:hidden ...

  4. Ajax的完整兼容各种浏览器版本代码

    <script type="text/javascript"> function createAjax(){ var request=false; //window对象 ...

  5. HTML 水平线<hr/>标签

    定义和用法: <hr/>标签在HTML页面中创建一条水平线. 水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分. HTML 与 XHTML 之间的差异 在 HT ...

  6. 认识<hr>标签,添加水平横线

    在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些.如下图所示: 语法: html4.01版本 <hr> xhtml1.0版本 <hr /> 注意: 1.  ...

  7. DIV以及图片水平垂直居中兼容多种浏览器

    纯css完美地解决图片以及div垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari具体实现css 如下,感兴趣的朋友可以参考下哈   第一种:全CSS控制 ...

  8. ZeroClipboard插件:兼容各浏览器网页复制功能

    常规利用JS编写的网页复制功能只对IE有效,无法做到兼容其它浏览器,代码如下: function copyToClipBoard(){ var clipBoardContent="" ...

  9. JavaScrip 原生多文件上传及预览 兼容多浏览器

    JavaScrip 原生多文件上传及预览 兼容多浏览器 html代码块 <div class="container"> <label>请选择一个图像文件:& ...

随机推荐

  1. shell基础

    1.显示当前登录linux系统的用户 2.当用户登录到linux系统后,一旦出现提示符时,便可以输入操作命令了.命令可以分为如下两类: (1).bash内置的命令: (2).应用程序. 怎么知道哪些指 ...

  2. 服务器响应头隐藏X-power-by

    服务器响应头隐藏X-power-by 这个不是Apache或者Nginx输出的,而是由语言解析器或者应用程序框架输出的. 这个值的意义用于告知网站是用何种语言或框架编写的.例如: PHP标准输出是:X ...

  3. animate.css配合wow.min.js实现各种页面滚动效果

    有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...

  4. xfire配置(java中的webservice)

    开发时需要在src中新建META-INF=>xfire=>services.xml 这样编译出来就在classes文件夹下. services.xml配置 <?xml version ...

  5. BackgroundWorker控件

    在我们的程序中,经常会有一些耗时较长的运算,为了保证用户体验,不引起界面不响应,我们一般会采用多线程操作,让耗时操作在后台完成,完成后再进行处理或给出提示,在运行中,也会时时去刷新界面上的进度条等显示 ...

  6. JQuery 简单的文字超出部分隐藏下拉显示

    HTML代码: <body> <div class="txt_bos"><!--在每一个放置文字的class外面包一个div,以便设置动画样式用,同样 ...

  7. swift 取出中间文本

    func  stringmid (wholestring:String,front:String,behind:String)->String { if wholestring.isEmpty ...

  8. nyoj 737 石子合并(一)。区间dp

    http://acm.nyist.net/JudgeOnline/problem.php?pid=737 数据很小,适合区间dp的入门 对于第[i, j]堆,无论你怎么合并,无论你先选哪两堆结合,当你 ...

  9. collectionView使用细节

    1.//创建组头组尾一个方法 - (UICollectionReusableView *)stCollectionView:(UICollectionView *)collectionView vie ...

  10. Selenium2+python自动化25-js处理日历控件(修改readonly属性)

    前言 日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题. 基本思路:先用j ...