hack使用

Posted 2021-01-26 sxdjy

第一段

选择器前缀法(即选择器Hack)


*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen9{...}只对IE6/7生效
@media screen {body { background: red; }}只对IE8有效
@media screen,screen9{body { background: blue; }}只对IE6/7/8有效
@media screen {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
---------------------
作者：LiYaCongGo
来源：CSDN
原文：https://blog.csdn.net/qq_38559709/article/details/78044401
版权声明：本文为博主原创文章，转载请附上博文链接！

第二段

为了能让网站设计正常的运行于各种浏览器平台，网站设计师们不得不想尽办法处理好网站建设中的浏览器兼容问题。正是因为网站设计当中的这一需要产生了一项新技术— CSS Hack。

CSS Hack 就是针对不同浏览器写出不同的 CSS code 的过程，主要用来解决目前各类浏览器无法标准解析CSS样式，导致同一网站设计页面在不同浏览器下出现显示效果不一致的兼容问题。  

代码: 使用hacker我可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）

IE6认识的hacker 是下划线_ 和星号 *

◆IE7 遨游认识的hacker是星号 *

比如这样一个CSS设置：

height:300px;*height:200px;_height:100px;

IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；

IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

如果你从上面的例子理解后,请看下面的一段话:(重在理解)
    1、针对I E 系列浏览器的网站设计代码
针对 IE 6的专属CSS Hack网站设计代码#id{display:block;}也就是在网站设计CSS属性前加一个小划线就好。
针对 IE 7的专属CSS Hack网站设计代码#id{*display:block;}即在网站设计CSS属性前加上一个星号即可        针对 IE 8的专属CSS Hack网站设计代码#id{margin-top:10px 9;/*IE8*/}
如上所示，解决办法为在网站设计CSS属性后分号前加上空格与斜线并加入一个数字9即可 。
　　2、针对火狐的CSS Hack 网站设计代码        
火狐可谓是最标准的浏览器之一了，网站设计技术只要稍稍不到位就能体现得淋漓尽致，所以不少网站设计师也很头痛，其实想要解决火狐的兼容性除了要把网站设计的基础知识扎牢之外只要将CSS代码写入到
@-moz-document url-prefix()的{ } 里面就行了        
例如:@-moz-document url-prefix(){#id{ display: block; }}。
　　3、针对Safari的CSS Hack网站设计代码
Safari是苹果计算机的最新作业系统Mac OS X中新的浏览器，用来取代之前的Internet Explorer for Mac，使用了KDE的KHTML作为浏览器的运算核心。
@media screen and (-webkit-min-device-pixel-ratio:0){#id { display: block; }}兼容性做法和火狐相近。
　　4、针对 Opera 的CSS Hack 网站设计代码
Opera即Opera Software ASA，是台式机、各种设备和移动网络浏览器市场的商业领袖，因快速、小巧和比其他浏览器更佳的标准兼容性获得了国际上的最终用户和业界媒体的承认，并在网上受到很多人的推崇。
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){head~body #id { display: block; }} (前面的一堆是在做浏览器的初始化)
---------------------
作者：gaoqiang1112
来源：CSDN
原文：https://blog.csdn.net/gaoqiang1112/article/details/77891969
版权声明：本文为博主原创文章，转载请附上博文链接！

第三段 兼容

NO2.不同浏览器的标签默认的外补丁和内补丁不同

    问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
    碰到频率:100%
    解决方案：css里    *{margin:0;padding:0;}
    备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0。

NO3.块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大
    问题症状:常见症状是ie6中后面的一块被顶到下一行
    碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
    解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
    备注：我们最常用的就是div+css布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

NO4.设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度
    问题症状：ie6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
    碰到频率：60%
    解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
    备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

NO5.行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug（类似第3种）
    问题症状：ie6里的间距比超过设置的间距
    碰到几率：20%
    解决方案：在display:block;后面加入display:inline;display:table;
    备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在ie6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。(此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。)(这是关于display的介绍)

NO6.图片默认有间距
    问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题2中提到的通配符也不起作用。
    碰到几率：20%
    解决方案：使用float属性为img布局
    备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。

NO7.标签最低高度设置min-height不兼容
    问题症状：因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容
    碰到几率：5%
    解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
    备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

NO8.点击问题

<body>
    <a href="#" onclick="doSet1(event);">点一下</a>
    <a href="#" onclick="doSet2(event);">点两下</a>
</body>
<script type="text/javascript">
    function doSet1(event) {
        alert(event.target.innerHTML);
    }
    function doSet2(event) {
        alert(event.srcElement.innerHTML);
    }
</script>
在IE下需要点击"点两下",在firefox下需要点击"点一下"
因为内核不同,一些内置对象的属性名称是不一致的,所以相同的js脚本可能在firefox下可用,而在IE下就不能用。(经测试IE无此BUG)

不过:js脚本屏蔽浏览器差异最简单有效的方式:使用jquery。因为jquery内部已经实现了屏蔽浏览器差异

NO9.透明度兼容设置

发生概率：主要看你要写的东西设不设透明度

解决方案：一句话

transparent_class {  

    filter:alpha(opacity=50);  

       -moz-opacity:0.5;  

       -khtml-opacity: 0.5;  

       opacity: 0.5;  

 }

opacity:0.5; This is the “most important” one because it is the currentstandard in CSS. This will work in most versions of Firefox, Safari, andOpera.This would be all you need if all browsers supported current standards. Which,of course, they don’t.

filter:alpha(opacity=50); This one you need for IE.

-moz-opacity:0.5; You need this one to support way old school versions of theMozilla browsers like Netscape Navigator.

-khtml-opacity:0.5; This is for way old versions of Safari (1.x) when therendering engine it was using was still referred to as KTHML, asopposed to thecurrent WebKit .

NO10.Box Model的bug(盒子模型bug)

描述：给一个元素设置了高度和宽度的同时，还为其设置margin和padding的值，会改变该元素的实际大小。

解决办法：在需要加 margin和padding的div内部加一个div,在这个div里设置margin和padding值。

NO11.IE6中的列表li楼梯状bug

描述：通常在li中的元素（比如a）设置了浮动float，但li本身不浮动。

解决办法：

ul li{float:left;}

或 ul li{display:inline;}

NO12.li空白间距

描述：在IE下，会增加li和li之间的垂直间距

解决办法：给li里的a显式的添加宽度或者高度

li a{width:20px;}

或者

li a{display:block;float:left;clear:left;}

或者

li {display:inline;}

li a{display:block;}

或者

在每个列表li上设置一个实线的底边，颜色和li的背景色相同

NO13.overflow：auto;和position:relative的碰撞

描述：此bug只出现在IE6和IE7中，有两个块级元素，父元素设置了overflow：auto;子元素设置了position:relative;且高度大于父元素，在IE6-7中子元素不会被隐藏而是溢出。

解决方案：给父元素也设置position:relative;

NO14.浮动层的错位

描述：当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7、IE8及其他标准浏览器里,超出的内容仅仅只是超出边缘;但在IE6中容器会忽视定义的width值,宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素,那么就会导致错位问题。

解决方案：overflow：hidden;

NO15.IE6克隆文本的bug

描述：若你的代码结构如下

<!--这是注释-->

    <div>

       ……

   </div>

<!--这是注释-->

很有可能在IE6网页上出现一段空白文本

解决方案：

使用条件注释

删除所有注释

在注释前面的那个浮动元素加上 display：inline；

NO16.IE的图片缩放

描述：图片在IE下缩放有时会影响其质量

解决方案：img{ -ms-interpolation-mode:bicubic;}//这个是解决图片失真的自带属性只有IE有

NO17.IE6下png图片的透明bug

描述：使用透明图片,使用png24或png32图片在IE6下面显示图片会有一层淡蓝色的背景。

解决方案：

.img{

background:url(‘http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png‘);

_background:0;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png‘,sizingMethod=‘scale‘);

}

img{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png‘,sizingMethod=‘scale‘);}

或

<imgsrc="test.png" width="247" height="216"style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png‘,sizingMethod=‘scale‘);" />

NO18.<iframe>透明背景bug

   描述：在IE浏览器中，<iframe>框架不会自动把背景设为透明

   解决方案：

    <iframesrc="content.html"allowTransparency="true"></iframe>

   在iframe调用的content.html页面中设置

   body{background-color: transparent;}

NO19.禁用IE默认的垂直滚动条

解决方案：

html{

   overflow:auto;

}

NO20.在IE6下有些元素看起来被隐藏了，但重新刷新后会再次出现，这是由于，一个容器的高度被浮动元素撑破后面又紧跟着非浮动元素，并且这些非浮动元素有一些定义了:hover链接。

解决方案：各种清除浮动。

NO21.a(有href属性)标签嵌套下的img标签，在IE下会带有边框。

解决:解决办法是加上a img{border:none;}样式。

NO22.input边框问题。

去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效。
　　ie6的默认CSS样式，涉及到border的有border-style:inset;border-width:2px;浏览器根据自己的内核解析规则，先解析自身的默认CSS，再解析开发者书写的CSS，达到渲染标签的目的。IE6对INPUT的渲染存在bug，border:none;不被解析，当有border-width或border-color设置的时候才会令IE6去解析border-style:none;。
解决方案是用:border:0或border:0 none;或border:none:border-color:transparent;，推荐用第三种方案。
---------------------
作者：gaoqiang1112
来源：CSDN
原文：https://blog.csdn.net/gaoqiang1112/article/details/77891969
版权声明：本文为博主原创文章，转载请附上博文链接！