浅谈CSS HACK——兼容不同浏览器的CSS

最新推荐文章于 2023-12-27 17:35:44 发布
最新推荐文章于 2023-12-27 17:35:44 发布
阅读量252 收藏
点赞数
原文链接：http://www.cnblogs.com/mrcoke/articles/2415357.html
版权

CSS hack是由于不同的浏览器，比如IE6,IE7,Firefox等，对CSS的解析不一样，导致解析的页面效果不一样，这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到同样页面效果。

CSS hack原理:
IE都能识别*，FF不能识别*
IE6能识别*，但不能识别!important
IE6识别_，IE7和FF均不识别_
IE7能识别*，也能识别!important
FF不能识别*，但能识别!important


所以大家就可以用这些符号来区分不同的浏览器，以下两种方法几乎能解决现今所有css hack：

1. !important

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.

    width: 100px!important; /* IE7+FF */  
    width: 80px; /* IE6 */

 

2, IE6/IE77对FireFox

 

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.

    #wrapper { width: 120px; } /* FireFox */  
    *html #wrapper { width: 80px;} /* ie6 fixed */  
    *+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */

 

注:*+html 对IE7的HACK 必须保证HTML顶部有如下声明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

3.区分FF,IE6,IE7

 

    background:orange;*background:green !important;*background:blue;        
/*或者*/background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。


转至：http://www.yangzblog.com/DIV-CSS/css-hack.html




转载于:https://www.cnblogs.com/mrcoke/articles/2415357.html

weixin_30609331
关注
html+css+js基础问答
qq_43751465的博客
08-26 5342
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
前端面试题
IT_Jiangxiaobai的博客
05-19 5234
01-HTML~02-CSS 1.每个HTML文件里面都有一个很重要的东西，Doctype，知道这是干什么的么？ 要点一 : 该标签告知浏览器浏览文档要使用的HTML规范 , 告知浏览器以何种规范解析页面 要点二 : 声明对大小写不敏感 2.常用浏览器有哪些，内核都是什么？ 答： 常用浏览器有chrome、safari、 IE、火狐(firefox) 、 Opera 、360、搜狗等 浏览器 内核 备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 firefo
区别不同浏览器CSS hack
03-14
IE都能识别*;标准浏览器(如FF)不能识别*； IE6能识别*，但不能识别 !important, IE7能识别*，也能识别!important; FF不能识别*，但能识别!important;
CSS Hack (各个浏览器兼容的问题)
albert的专栏
09-23 1万+
写css样式的时候，恐怕最头疼的就是各个浏览器下的兼容性问题，即css hack，明明感觉应该是对的，但是就是出不来效果，我根据平时所接触的，总结一下关于兼容 性的技巧，希望可以对大家有所帮助…… CSS Hack的原理是什么 由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。 　　CSS Hack大致有3种表
浏览器hack总结 详细的浏览器兼容性解决方法
weixin_30933531的博客
08-28 133
由于各浏览器对页面的解析不同，会导致页面在不同浏览器中显示的样式不一致，为了保持页面的统一，经常需要对浏览器进行兼容性问题的调试。 CSSHack 面对浏览器诸多的兼容性问题，经常需要通过CSS样式来调试，其中用的最多的就是CSSHack。所谓CSSHack就是针对不同的浏览器书写不同的CSS样式，通过使用某个浏览器单独识别的样式代码，控制该浏览器的显示效果。CS...
不同浏览器兼容性——常用的CSS Hack技术
xin_xun_的博客
04-17 500
一、什么是CSSHack？ 不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程，就叫CSS Hack。 CSS Hack常见的有三种形式：CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。 1、属性级Hack：比如
浏览器兼容css hack,CSS Hack技术解决多浏览器兼容问题
weixin_28839549的博客
08-04 276
本文向大家描述一下如何使用CSS Hack技巧解决DIV+CSS布局多浏览器兼容问题，针对不同的浏览器写不同的CSS代码的过程，就叫CSS Hack，相信本文介绍一定会让你有所收获。CSS Hack技巧汇总CSS Hack简介我们在用DIV+CSS制作网页时，由于不同的浏览器，比如InternetExplorer6,InternetExplorer7,MozillaFirefox等对CSS的支持及...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
VUE面试题
永生天地
02-17 1480
一、vue 生命周期 先看一张图片，图片来源于官网：https://cn.vuejs.org/v2/guide/instance.html 以上钩子详细：（只解释了几个主要的） 1.beforeCreate 在页面被加载的时候首先会创建一个Vue的实例，并且初始化该实例，在实例初始化之后，此时被调用的生命周期钩子叫做：beforeCreate,这个时候数据的观测和事件还没有被调用（特就是说此时还读取不到data里面的数据和实力内的方法） 2.created 当vue实例初始化后，实例创建完成后立
缓存详解
前端小渣
01-27 2624
前言 总括： 缓存从来都是前端的一个痛点，很多前端搞不清楚缓存到底是何物，从而给自己创造了一些麻烦，本文一如既往的用通俗易懂的文字和实例来讲述缓存，希望能让您有所得。 原文博客地址： 缓存详解 知乎专栏&&简书专题：前端进击者（知乎） 博主博客地址：Damonare的个人博客 天青色等烟雨，而我在等你。 正文 缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。
html+css+js实现XP WINDOW界面修改版
05-13
html+css+js实现XP WINDOW界面修改版 对IE8 FF CHROME全部支持
不同浏览器的CSS Hack总结
tomc 的专栏
07-23 508
书写顺序为FireFox在最前，其次是IE8、IE7，最后是IE6。     color:red; /*所有浏览器*/color:blue/9; /*所有IE*/+color:orange; /*IE7*/_color:green; /*IE6*//***************/*color:black; /*IE7 & IE6*/  如
不同浏览器的专属hack
woyaoshengzhang的博客
09-19 193
1. IE浏览器 前缀：-ms- {-ms-transform:none;} ie不同版本的hack 参考网址：http://www.webhj.com/hj-650.html   .box{ color:#333; /* 所有浏览器 */ color:#333\9; /* ie6,7,8,9,10 */ color:#333\0; ...
CSSHACK解决IE兼容性问题
herion_liu的博客
06-14 374
什么是CSSHACK? 针对不同浏览器，书写不同的CSS代码的过程，称为“CSS HACK”。 也就是说：写一个CSS代码，让IE6识别，其它浏览器不识别。 下面，针对不同浏览器，有几个符号：        这些符号是在CSS属性的前面加的，用于分辨不同的浏览器版本。                l “*”IE6和IE7都识别。如：.box{ *background-color:r
如何解决不同浏览器的样式兼容性问题?
wangxuanyang_zer的博客
10-19 2027
在前端开发中，不断学习和更新技能，以跟上浏览器和Web标准的发展，是确保网站在各种浏览器中具有一致外观和行为的关键。采用渐进增强的策略，即首先确保基本内容和功能在所有浏览器中都能正常工作，然后再为支持现代功能的浏览器添加额外的样式和功能。首先，了解不同浏览器之间的差异是解决兼容性问题的关键。请注意，随着浏览器的发展，一些浏览器可能不再需要特定的前缀，因此需要根据最新的浏览器支持情况逐渐减少前缀的使用。Flexbox和Grid布局是强大的布局工具，但不同浏览器可能需要不同的前缀或具体设置来实现相同的效果。
史上最全的CSS hack方式一览
923723914
09-28 2148
做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协，虽然这只是个别情况。今天，结合自己...
前端必知：33.css的hack
qq_52799985的博客
07-29 7594
在前端开发中，CSS hack是一种常用的技巧，用于解决不同浏览器之间对CSS属性、选择器或特性支持的差异。通过使用CSS hack，可以针对特定的浏览器或浏览器版本提供特定的样式规则，以确保在不同浏览器中获得一致的显示效果。
在不同的浏览器使用不同的css样式,解决浏览器兼容问题
热门推荐
唐策的博客
01-11 1万+
让CSS区别不同浏览器 区别不同浏览器，CSS hack写法： 区别IE6与FF： background:orange;*background:blue; 区别IE6与IE7： background:green !important;background:blue; 区别IE7与FF： background:orange; *backgro
判断浏览器类型，CSS兼容不同浏览器的写法，CSS自适应不同设备宽度的写法
最新发布
飙歌的博客
12-27 1826
可以根据各浏览器的特性来判断浏览器类型，我们把对IE的判断放在第一，因为IE的用户最多，其次是判断Firefox。以前判断是否IE浏览器用的是window.navigator.userAgent，跟踪这个信息，发现在开发环境，识别为IE10，但访问服务器则识别为IE11，但IE11的userAgent里是没有MSIE标志的，所以原来的判断方式就判断不出IE11。ie10及以上不支持ie浏览器的判断了，因为ie11已经不支持document.all了，下面是支持ie11的版本的，当然ie6-8也是支持的。
掌握CSS hack技术：解决浏览器兼容性问题
资源摘要信息:"CSS hack 是一种针对不同浏览器和它们的版本之间的CSS兼容性问题的解决策略。通过CSS hack，开发者可以为特定浏览器或其特定版本编写特定的CSS代码，确保在不同环境下的页面显示一致。 CSS hack的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值