0

0

div+css浏览器兼容之对css hack的理解_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 12:30:31

|

1217人浏览过

|

来源于php中文网

原创

 写了这么久的div+css代码,我还真不知道这个hack是什么? 上网仔细查了一下。简单的说针对不同的浏览器写不同的 CSS code 的过程,就叫 CSS hack , 也叫写 CSS hack 。

Css hack 的原理: 由于不同的浏览器对 CSS 的支持及解析结果不一样,还由于 CSS 中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的 CSS 。

  比如 IE6 能识别下划线 "_" 和星号 " * " , IE7 能识别星号 " * " ,但不能识别下划线 "_" ,而 firefox 两个都不能认识。等等

书写顺序,一般是将识别能力强的浏览器的 CSS 写在后面

浏览器优先级别 :FF

来看下面div+css浏览器兼容的例子:  

#demo {width:100px;}     /* 被 FIREFOX,IE6,IE7 执行 .*/

* html #demo {width:120px;} /* 会被 IE6 执行 , 之前的定义会被后来的覆盖 , 所以 #demo 的宽度在 IE6 就为 120px; */

*+html #demo {width:130px;} /* 会被 IE7 执行 */

所以最后 ,#demo 的宽度在三个浏览器的解释为 :

   firefox:100px;

   ie6:120px;

ie7:130px;

以上例子也可以用我的上一篇文章“div+css浏览器兼容一 中的方法来解决!在这里就不再举例了。”

div+css浏览器兼容技巧:

① 垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)

② 水平居中. margin: 0 auto;(当然不是万能)
③ 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
④ FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
⑤ ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)

⑥ 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.

⑦ 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

⑧ FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)

  注:针对firefox  IE6  IE7的css样式
现在大部分都是用!important来hack,对于IE6和firefox测试可以正常显示,
但是IE7 !important可以正确解释,会导致页面没按要求显示!找到一个针
对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。


现在写一个 浏览器兼容:
#cshk{ height:20px; } /* Moz */
* html #cshk {height:50px; } /* IE6 */
*+html #cshk {height:80px; } /* IE7 */
那么在firefox下高度为20,IE6下的高度为50,IE7下的高度为80。

给大家一点意见:能不用 CSS Hack还是不用的好。其实在设计网站的时候,如果能考虑到一些可能出现CSS bug的地方,是最好的,我设计网站的时候都尽量避免CSS bug.一般高手都不用hack.

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

31

2026.01.28

包子漫画在线官方入口大全
包子漫画在线官方入口大全

本合集汇总了包子漫画2026最新官方在线观看入口,涵盖备用域名、正版无广告链接及多端适配地址,助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

9

2026.01.28

ao3中文版官网地址大全
ao3中文版官网地址大全

AO3最新中文版官网入口合集,汇总2026年主站及国内优化镜像链接,支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

32

2026.01.28

php怎么写接口教程
php怎么写接口教程

本合集涵盖PHP接口开发基础、RESTful API设计、数据交互与安全处理等实用教程,助你快速掌握PHP接口编写技巧。阅读专题下面的文章了解更多详细内容。

1

2026.01.28

php中文乱码如何解决
php中文乱码如何解决

本文整理了php中文乱码如何解决及解决方法,阅读节专题下面的文章了解更多详细内容。

3

2026.01.28

Java 消息队列与异步架构实战
Java 消息队列与异步架构实战

本专题系统讲解 Java 在消息队列与异步系统架构中的核心应用,涵盖消息队列基本原理、Kafka 与 RabbitMQ 的使用场景对比、生产者与消费者模型、消息可靠性与顺序性保障、重复消费与幂等处理,以及在高并发系统中的异步解耦设计。通过实战案例,帮助学习者掌握 使用 Java 构建高吞吐、高可靠异步消息系统的完整思路。

8

2026.01.28

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

23

2026.01.27

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

122

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程
edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

51

2026.01.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
燕十八nginx精品视频教程
燕十八nginx精品视频教程

共23课时 | 7.2万人学习

独孤九贱(6)_jQuery视频教程
独孤九贱(6)_jQuery视频教程

共44课时 | 34.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号