当前位置: 网站建设 > 网页设计 > 建站经验 >

详解IE CSS Bug及解决方案

时间:2013-03-02 04:15来源:未知 作者:admin 点击:

标签:详解IE CSS Bug及解决方案 Bug(15)all-i(1)CSS(823)详解(47)解决方案(10)property(1)
property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6, 详解div+css相对定位和绝对定位用法 ; Tag:Bug CSS IE Bug CSS IE 问题 浏览器 解决办法 Hacking Rules: 目前IE浏览器依然是十分主流的浏览器,搞定了IE,也相称于占据了7、80%的领地。下文具体先容了CSS应用在IE各个版本浏览器中呈现的问题及解决方式,通过表格很直观的展现给大家。作为一
详解IE CSS Bug及解决方案》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234Z32013.htm

 

 

property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6,详解div+css相对定位和绝对定位用法;

Tag:Bug   CSS   IE       Bug   CSS   IE  ,详解CSS阴影的使用;    

 

    问题 浏览器 解决办法 Hacking Rules:

 

目前IE浏览器依然是十分主流的浏览器,搞定了IE,也相称于占据了7、80%的领地。下文具体先容了CSS应用在IE各个版本浏览器中呈现的问题及解决方式,通过表格很直观的展现给大家。作为一名前端,咱们通常要做的就是让页面在各体系A-Grade浏览器,甚至网站浏览份额0.1%以上的阅读器上良好显示。当然,还有机能问题,详解CSS选择器、优先级与匹配原理。不外,今天要说的是款式的兼容问题。在IE/Mozilla/Webkit/Opera四分天下的今天,IE6-9/Mozilla(Gecko)系列/Chrome/Safari/Opera etc. 这些浏览器的兼容,无不让前端们头痛。而在这之中,最让人头痛确当数IE,特殊是IE6。搞定了IE6,基础也就能称霸半个山河了。搞定了IE,也相称于占领了7、80%的领地。你想做一个统治页面兼容的主么?那就珍藏本文,当前确定有用!

--> [网站建设之]详解IE CSS Bug及解决计划

1 input[button | submit] 不能用 margin:0 auto; 居中 IE8 为input增加width 2 body{overflow:hidden;}不去掉转动条 IE6/7 设置html{overflow:hidden;} 3 hasLayout的标签领有高度 IE6/7 *height:0;
_overflow:hidden; 4 form>[hasLayout]元素有margin-left时,子元素中的[input | textarea] 出现2×margin-left IE6/7 form > [hasLayout 元素]{margin-left:宽度;}
form div{*margin-left:宽度÷2;} 5 当border-width有1条<边3条时被设置成dotted时,1px的边dotted显示成dashed IE7 不在统一个元素上使用不同宽度的 dotted 6 当子元素有position:relative的时候,父元素设置overflow:[hidden|auto]相当于给子元素设置了position:visible; IE6/7 给父元素设置position:relative; 7 :hover伪类不能转变有position:absolute的子级元素的left/top值 IE7 把top/left的值设置成除0%外的所有百分值;或添加一个margin-[所有方向]除0外的所有值,包括0% 8 :focus + selector {} 抉择器失效 IE8 在失效挑选器后面添加一个空选择器, :focus{} 9 列表中凌乱的浮动:在list中浮动图片时,图片涌现溢出畸形地位;或没有list-style IE8 用背景图片调换list-style 10 th 不会主动继续上级元素的 text-align IE8 给th添加text-align:inherit; 11 样式(包含link/style/@import(link)) 最多容许个为是:32 IE6-8 99.99%的情形下,不会碰到 12 :hover 时若background-color为#fff, 失效 IE7 把background-color改成background。或者,非#fff || #ffffff 13 疏忽’>’后有解释的取舍器:selector> /**/ selector{} IE7 官方DEMO有误 14 * html IE6 只对IE6有效 15 PNG图片中的色彩和背景颜色的值雷同,但显示不同 IE6-7 应用 pngcrush 去除图片中的 Gamma profiles 16 margin:0 auto; 不能让block元素水平居中 IE6-8 给block元素添加一个width 17 使用伪类 :first-line | :first-letter, 属性的值中出现!important 会使属性失效 IE8 !important is evil, don’t use it anymore 18 :first-letter 生效 IE6 把 :first-letter 移到离{}最近的处所,如 h1, p:first-letter{},而非 p:first-letter h1{} 19 Position:absolute元素中,a display:block, 在非:hover时只有文本可点击 IE6/7 给a添加background, 假如背景透明,使用background:url(‘任何页面中已经缓存的文件链接’),不推荐background:url(#),由于会增添一下HTTP恳求 20 float列表元素不程度对齐:li不设置float,a设置display:block;float:[方向],li不水平对齐 IE6/7 给li设置display:inline 或 float:[方向] 21 dt, dd, li 背景失效 IE6 dt, dd, li{position:relative;} 22 <noscript />元素的样式在启用javascript的情况下显示了样式 IE6-8 利用js给<noscript />,详解CSS背景Background属性;添加display:none; 23 使用filter处置的透明背景图片的透明局部不可点 IE6-8 把background:none变成background:url(‘链接’),链接到自身跟图片之外的任何文件 24 li内元素偏离 baseline 向下拉 IE8 给li设置display:inline 或 float:[方向] 25 列表中li的list-style不显示 IE6/7 给li添加margin-left,留空间来显示(不要加在ul上) 26 图片不能垂直居中 IE6/7 添加一个空标签,并赋给”Layout”, 比方display:inline-block; 27 不能自定义指针样式 IE6-8 给指针文件设置相对门路 28 背景溢出,拖动滚动条后显示正常 IE6 给父元素添加overflow:hidden避免溢出,并赋予hasLayout,如果添加_zoom:1; 29 高度超过height定义的高 IE6 增添_overflow:hidden;(推举)或者_font-size:0; 30 宽度超过width定义的宽 IE6 添加_overflow:hidden; 31 双倍边距 IE6 添加display:inline到float元素中 32 margin负值暗藏:hasLayout的父元素内的非hasLayout元素,使用负边距时,超越父元素部门不可见 IE6/7 去掉父元素的hasLayout;或者赋hasLayout给子元素,并添加position:relative; 33 给两个浮动元素的某中一个的文字设定为斜体,另一个元素下拉在有斜体文字元素的下面 IE6 给有斜体文字的元素添加overflow:hidden; 35 3px 距离:在float元素后的元素,会有3px距离 IE6 因为是确实的3px,所以,详解CSS网页设计中字体大小(em)的问题,用“暴力破解”吧,好比_margin-left:-3px; 35 text-align 影响块级元素 IE6/7 收拾你的float;或者离开设置text-align
(责任编辑:网站建设)
详解IE CSS Bug及解决方案相关文章
上一篇:详解div+css相对定位和绝对定位用法 下一篇:详解元素层叠级别(stack level)及z-index
回到顶部