【css】关于 hr 在各浏览器中的问题
在做页面是有时候会用到分割线 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 在各浏览器中的问题的更多相关文章
- CSS - Select 标签在不同浏览器中的高度设置
当使用Select标签时,在不同浏览器中显示的高度不同,如何解决此问题: 解决方法链接:http://stackoverflow.com/questions/20477823/select-html- ...
- css控制背景图片在浏览器中居中,下拉浏览器的时候背景图一直不变
如 http://www.gm.com/ css样式如下 ;;} #con{ position:absolute; ; ; height:100%; width:100%; background-im ...
- 浏览器中CSS的BUG
对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. 其它请参考:CSS hack 针对IE6,IE7,fir ...
- css在各浏览器中的兼容问题
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...
- 清除css、javascript及背景图在浏览器中的缓存
在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...
- 【Web前端】清除css、javascript及背景图在浏览器中的缓存
在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...
- 避免css中文字体在浏览器中解析成乱码
许多童鞋在写CSS的时候,设置中文字体常常使用中文字符,例如font-family:”黑体”,这样我们在浏览器中看到的是什么样子的呢 ? 如果不想自己写的界面在浏览器字体声明上有异常,建议在书写css ...
- DIV+CSS在不同浏览器中的表现
在给员工培训DIV+CSS的过程中.他们向我提出了非常多问题,有些问题我自己也没有想到过于是抽了些时间自己进行了一番实验,所有实验在IE7和Firefox中进行: 实验一.假设一个div没有指定 ...
- js 如何在浏览器中获取当前位置的经纬度
这个有一定的误差哈,具体的误差是多少,有兴趣的朋友可以去测试下 直接上代码 index.html页面代码: <html> <head lang="en"> ...
随机推荐
- 关于Big Endian 和 Little Endian
Big Endian 和 Little Endian 一.字节序 来自:http://ayazh.gjjblog.com/archives/1058846/ 谈到字节序的问题,必然牵涉到两大CPU派系 ...
- Fast Algorithm To Find Unique Items in JavaScript Array
When I had the requirement to remove duplicate items from a very large array, I found out that the c ...
- 《图说VR入门》——DK2入门及其资源汇总
本文章由cartzhang编写,转载请注明出处. 全部权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/53174895 作者:car ...
- python geoip2使用
使用geoip可以查询ip的详细地址信息,简单记录下使用方法(centos python2.7): 1.安装 yum -y install geoip geoip-devel pip install ...
- Rocket MQ 源码解析
http://rocketmq.apache.org/rocketmq/the-design-of-transactional-message/ http://www.iocoder.cn/Rocke ...
- Redis高可用架构—Keepalive+VIP
最近整理一下Redis高可用架构的文档,也准备分享出来,虽然这些架构也不是很复杂.Redis的高可用方案目前主要尝试过5种方式,其中2种方式已经在线上使用. 1)Redis Master-Slave ...
- [Windows Azure] Create a Virtual Network for Site-to-Site Cross-Premises Connectivity
Create a Virtual Network for Site-to-Site Cross-Premises Connectivity This tutorial walks you throug ...
- [Windows Azure] Enabling Diagnostics in Windows Azure
Enabling Diagnostics in Windows Azure Windows Azure Diagnostics enables you to collect diagnostic da ...
- Tornado使用-简介
1.什么是Tornado Tornado是一个python web框架,和一个异步网络通信库. 因为它的非阻塞网络IO,可同时支撑万级别的连接请求. 适用于长轮询,全双工websocket通信. 2. ...
- Android 编程下 Eclipse 恢复被删除的文件
开发过程中文件误删除,又没有 Git,SVN 等版本控制软件的备份,怎么办? Eclipse 自带了恢复历史文件的功能:在项目上点击右键,选择 Restore from Local History,在 ...