ie浏览器css怎么调,IE浏览器下的CSS问题小结
IE浏览器下的CSS问题小结
发布时间:2012-10-11 23:52:59 作者:佚名 我要评论
IE浏览器下的CSS问题小结,需要的朋友可以参考下
IE下的特殊情况
下面是14条特殊情况你看一下是哪个问题出错了这些仅供参考:
1. 文字本身的大小不兼容。同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff 下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。解决方案:给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要,在高度上我们不能容忍1px 的差异。
2.ff下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而ie下是会被内容撑大,高度限定失效。所以不要轻易给容器定义height。
3.横向上的撑破容器问题,。如果float 容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie下则会优先考虑内容折行。故,内容可能撑破的浮动容器需要定义width。
小实验:有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。
a.
c.
上面的代码在不同浏览器中是不一样的,实验起源于对小height 值div 的运用,
4.最被痛恨的,double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案,给浮动容器定义display:inline。
5.mirror margin bug,当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px。 padding也会出现类似问题,都是ie6下的特产,该类bug 出现的情况较为复杂,远不只这一种出现条件,还没系统整理。解决方案:外层元素设定border 或 设定float。
引申:ff 和ie 下对容器的margin-bottom,padding-bottom的解释有时不一致,似乎与之相关。
6. 吞吃现象。还是ie6,上下两个div,上面的div设置背景,却发现下面没有设置背景的div 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。解决方案:使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。
7.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案,ie6的这个bug 下,大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变。解决方案:用“ picRotate start ”方法写注释。
8.img 下的留白,大家看这段代码有啥问题:
把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写
后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案:给img设定 display:block。
9. 失去line-height。
,很遗憾,在ie6下单行文字 line-height 效果消失了。。。,原因是这个inline-block元素和inline元素写在一起了。解决方案:让img 和文字都 float起来。
引申:大家知道img 的align 有 text-top,middle,absmiddle啊什么的,你可以尝试去调整img 和文字让他们在ie和ff下能一致,你会发现怎么调都不会让你满意。索性让img 和文字都 float起来,用margin 调整。
10.clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层,这样有问题,不仅仅是ff和op下失去margin效果,ie下某些margin值也会失效
11.ie 下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效。解决方案:给overflow:hidden加position:relative或者position: absolute。另,ie6支持overflow-x或者overflow-y的特性,ie7、ff不支持。
12.ie6下严重的bug,float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度。float元素如果作为布局用或复杂的容器,都要给个宽度的。
13.ie6下的bug,绝对定位的div下包含相对定位的div,如果给内层相对定位的div高度height具体值,内层相对层将具有100%的width值,外层绝对层将被撑大。解决方案给内层相对层float属性。
14.width:100%这个东西在ie里用很方便,会向上逐层搜索width值,忽视浮动层的影响,ff下搜索至浮动层结束,如此,只能给中间的所有浮动层加width:100%才行,累啊。opera这点倒学乖了跟了ie。
ie的float bug(ie6,ie7)使前端工程师们为之困扰,最常见的现象就是:当浮动元素的父级元素在拖动滚动条的时候出现边框的缺失,对于此类问题的解决方案就是使浮动元素获得布局.
在诸多的情况中,因为页面需要宽度自由伸缩而不能申明宽度为固定值,但我们可以设置*height:1%;,*在这里可谓是举足轻重,因为*只能被ie7及以下版本解析,ie8并不识别此类写法,所以可以使用这个写法来区别ie8和其他版本号的ie浏览器.对网上流行的ie8 beta1的hack,也算是一个补充.
一些常用的hack测试
* html p {color:red;} 支持 IE6 不支持FF IE7 IE8b
*+html p {color:red;} 支持 IE7 IE8b 不支持FF IE6
p {*color:red;} 支持 IE7 IE6 不支持FF IE8b
IE8 中增加了 CSS3 中的子串匹配的属性选择器(substring matching attribute selectors),具体规则与正则中的匹配很相似:
E[att^=’val’] //子串以’val’ 开始
E[att$=’val’] //子串以’val’ 结束
E[att*=’val’] //子串中包含’val’
IE8 支持绝大多数基本的 CSS2.1 选择器,不支持的包括但不限于:[:first-line] 、[:first-letter]。
对于 CSS2.1 中的 generated content 部分,即通过使用伪元素 :before 和 :after 添加文本内容,IE8 中支持 并未完全 。
而对于几乎在其他浏览器中都支持的 opacity 和 RGBA ,IE8 中依旧没有支持。
对于原来用来区分 IE 的 HACK 在 IE8 中基本失效(比如*property:value、*property:value等)。
原有 IE 的 list-item whitespace bug 在 IE8 中依旧存在。
原有 IE 的 z-index bug 在 IE8 中依旧存在。
IE8 中产生新的 bug:当 line-heigth 小于正常值时,超出的部分将被裁切掉。
IE8 中依然不支持 display:table 。
IE8 中依然不支持 border 的 transparent 值。
IE8 中 @import 只支持三层嵌套。
IE8中 border的 transparent 不被支持
IE8中产生新的BUG:line-heigth BUG
只针对IE8的hack,可以是属性也可以是类
BUG描述:
页面中某DIV使用了position:relative,结合top=-25px等元素定位。在FF和IE7下表现正常,但是在IE6中该DIV会随鼠标滚动而滚动。
分析:
这是IE6一个已知的BUG:当某position:relative元素被带有overflow:auto/scroll属性的块级元素包含时,会表现出postion:absolute的行为。
解决方法:
1.为包含块元素添加属性position:relative 。
2.把该元素的position:relative属性去掉,使用默认的static定位,并通过margin-top等属性实现类似的效果。
ie6的末日即将来临,对我们前端开发人员来说,无疑是一个慰藉人心的喜讯.但这个末日也并非朝日可至,所以我们还是争取最后的胜利,用各种 hack和方法来规避ie6下双边距,背景透明,重复文字等等一堆bug.下面是转载自前端观察(译自www.sitepoint.com)中的10个修复ie6下bug技巧:
1. 使用DOCTYPE
你应该在一直每个HTML文件的头部都使用DOCTYPE,并且我们推荐使用strict 版本,比如:
或者,对于XHTML使用:
你需要处理的最棘手的事情就是IE6进入quirks模式——它已经够诡异了。
2. 设置position: relative
将一个元素设置为”position:relative”可以解决很多问题,特别是你曾经遇到隐藏的或对齐诡异的盒子。显然,你需要非常小心点儿,因为绝对定位的子节点可能会因此重新定位。
3. 将浮动元素设置为display:inline
具有margin属性的浮动元素可能引起著名的IE6双倍margin问题,比如,你为一个元素指定margin-left为5px,但是IE6中实际上却表现为10px。”display:inline”将解决这个问题,尽管这不是必须的,你的CSS仍然是有效的。
4. 将一个元素设置为hasLayout
很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。这是一个IE内部属性(IE隐藏的,更多关于haslayout的资料,可以参阅这里),用来确定相对于其他元素,内容是如何布局和定位的。如果你需要设置一个inline元素(比如一个链接)为block元素,或者是应用透明效果,设置hasLayout也可能是必须的。
最简单的设置 hasLayout的方法是为CSS设置一个高度或宽度(zoom也可以用,但是zoom并不是CSS标准的一部分)。我们推荐设置实际尺寸,但是问题是这是不现实的,你可能需要使用”height:1%”。如果父元素并没有设置高度,该元素的实际高度并不受影响,而且这个时候hasLayout已经被启用。
5. 修正重复文字bug
复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的:
.确保所有的元素使用”display:inline;”
.在最后一个元素上使用一个”margin-right:-3px;”
.为浮动元素的最后一个条目使用一个条件注释,比如:
.在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。
>>>>>>你还可以访问positioniseverything.net 查看该问题的完整介绍。
6. 在可点击和悬停的元素上只使用标签
IE6只认识对a标签的CSS hover效果。
你也可以在基于JavaScript的组件内使用他们来控制,以使他们保持键盘的可操作性。是有一些可替代的选择,但是标签比其它方案更可靠。
7. 使用!important 或高级选择器来区分IE6
不使用传统Hack或在额外文件中的条件CSS的方法,写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义:
复制代码代码如下:
#element {
min-height: 20em;
height: auto !important;
height: 20em;
#element[id] {
height: auto;
}
8. 避免百分比单位
百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小,才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比,比如:
body {
margin: 2% 0 !important;
margin: 20px 0;
}
9. 尽早测试并不断测试
不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕,而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行,那么一般在其它浏览器就不会有问题。
10. 重构你的代码
经常发生的事情是,修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码,但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。
-------------------------------------------------------------------------------------------------------
让IE6支持PNG格式的图片
用法:
先复制下面的代码在记事本中,然后另存为pngbehavior.htc(名字可以任意):
复制代码代码如下:
var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&
navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";
var isPrinting = false;
if (supported) fixImage();
function propertyChanged() {
if (!supported || isPrinting) return;
var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if (!new RegExp(blankSrc).test(src))
fixImage();
};
function fixImage() {
// get src
var src = element.src;
// check for real change
if (src == realSrc && /\.png$/i.test(src)) {
element.src = blankSrc;
return;
}
if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}
// test for png
if (/\.png$/i.test(realSrc)) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
"AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}
function beforePrint() {
isPrinting = true;
element.src = realSrc;
element.runtimeStyle.filter = "";
realSrc = null;
}
function afterPrint() {
isPrinting = false;
fixImage();
}
最后在你的css文件里面加上这么一段代码:
img {behavior: url("pngbehavior.htc");}
相关文章
这篇文章主要介绍了关于CSS浮动与取消浮动的问题,通过设置元素脱离正常的文档流让元素靠左或向右靠近,通过设置文字包周围图片来解决浮动问题,具体解决方法跟随小编一起2021-06-28
本文介绍了什么是 ::marker 以及它的一些实用场景,可以看出虽然 ::before 、::after 也能实现类似的功能,但 CSS 还是提供了更具有语义化的标签 ::marker,也表明了大家需2021-06-25
很多前端的初学者,在使用margin的之后或许会遇到一些问题,本文主要介绍了margin塌陷和margin合并,需要的朋友们下面随着小编来一起学习学习吧2021-06-24
当我们想写一个类似掘金的文章或者自己的博客的时候,是否有想过该怎么实现给自己文章的章节添加章节号,本文就来介绍一下使用CSS实现章节添加自增序号的方法,感兴趣的可2021-06-23
本文主要介绍了CSS变量实现主题切换的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2021-06-23
本文就将介绍一些使用单标签绘图的技巧,并且使用这些技巧,借用单个标签去实现一些复杂图形,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2021-06-16
这篇文章主要介绍了CSS几步实现赛博朋克2077风格视觉效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2021-06-15
今天来带大家做一个可爱的滑动导航栏效果,这个demo很基础,但是使用场景非常广泛,感兴趣的小伙伴们可以参考一下2021-06-15
大家都知道Calc方法有个很大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度,本文通过一个例子给大家详细介绍,需要的朋友参考下吧2021-06-03
本文将给大家介绍使用 CSS prefers-* 规范提升网站的可访问性与健壮性的相关知识,在css媒体查询中新增的几个特征功能,本文也给大家详细介绍,需要的朋友可以参考下2021-05-25
最新评论
ie浏览器css怎么调,IE浏览器下的CSS问题小结相关推荐
- 双下划线一粗一细怎么加_css双下划线 css样式中怎样控制下划线的粗细?
html 怎么加双横线给相应的标签加一个属性border-bottom:3px double red; 如果双线间的距离要加大,把3px改为更大的值就行了,不过不能小于3px,不然就叠在一起看不出来是 ...
- 浏览器下的CSS透明度
浏览器下的CSS透明度 元素透明度时常是个恼人的问题,下面这种方式可以实现所有浏览器下的透明度设置: .transparent {zoom: 1;filter: alpha(opacity=50);o ...
- [css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样
[css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样 <div style="width: 100%;height: 1px;"&g ...
- css省略号在火狐浏览器下不兼容的问题
最近涨了一个关于css省略号的知识 写一下总结,方便以后回忆起来 一个很基本的知识点, 导航栏超出限制字数后显示省略号 通用限制写法 /* 显示一行,省略号 */white-space: nowrap ...
- 写自己的CSS框架 Part2:跨越浏览器的reset
One world,one dream ---slogan of 2008 Olympic 2.1浏览器的差异在何处 我想写CSS的人大多遇见过在IE里写的页面美轮美奂,而用FF打开却是 ...
- 使用绝对定位时浏览器大小改变排版会乱_HTML amp; CSS页面布局之定位
我们在编写网页代码时,首先应该做的就是设计好页面的布局形式,然后再往里面填充内容.网页布局的好与坏,直接决定了网页最终的展示效果.这里总结一下 WEB前端CSS部分的定位问题,同时这些问题也是对一些基 ...
- 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks
[总结]浏览器CSS Hacks汇总 浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的漏洞 ...
- ie浏览器样式兼容写法_IE浏览器兼容问题-----html和css的兼容写法
用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫.此时我们要用到hack. HACK就是针对不同的浏览器写不同的HTML.CS ...
- CSS浏览器兼容性的4个解决方案:浏览器CSS样式初始化、浏览器私有属性,CSS hack语法和自动化插件...
前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了(如果全写出来,那真是一箩筐),更让人头疼的是,还要面临各种适配.兼容性问题. 一直以来都是头痛医头脚痛医脚,没有进行系统的梳理,整个 ...
- php动态页面在ie浏览器中css布局板块全缩在中间,CSS网页布局开发时的常见问题及解决方法...
双外边距浮动的问题 使用浮动,且有给外边距的div在ie6中会出现外边距加倍的:这是比较简单的解决的bug;只要将元素的display属性设置为inline就行了.所以每当对具有水平外边距的元素进行浮 ...
最新文章
- cubemx pwm dma_红米K30S至尊纪念版翻车?被曝虽是LDC屏,却是PWM调光
- POJ 1597 Function Run Fun
- 用JavaScript实现简单的excel列转sql字符串
- stm32 无符号整形_STM32中“unsigned short”和“unsigned int”的区别是什么?
- Performance Co-Pilot
- debian9为什么默认是pip2_VirtualBox内刚刚安装完Debian9系统,也无法设置共享文件夹。解决的方法就是安装VirtualBox客户端增强包。...
- 【前端周刊】20190606
- 关于echarts的疑问
- 通过设置proxyTable实现调用接口跨域
- 如何关闭CSDN右下角的小广告
- 如何0成本搭建外卖CPS返利小程序
- Windows 10升级无法选择保留个人文件、设置问题解决
- 吃饭,睡觉,打豆豆任务二
- oracle缩小数据文件大小,怎样将数据文件的大小变小
- 公众号服务器配置如何不显示,公众号服务器配置信息怎么设置
- 塔夫茨计算机科学,塔夫斯大学计算机科学博士专业详情及要求是怎样的?
- LabVIEW入门第三天(软件及驱动包下载)
- 纯真数据库理解及根据IP定位地区
- 更改技嘉主板开机画面
- 基于java ssm springboot宠物用品商城系统