在IE及某些浏览器中的CSS Bug

最新推荐文章于 2024-09-21 17:18:04 发布
原创 最新推荐文章于 2024-09-21 17:18:04 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #浏览器 #ie

博客主要介绍了IE浏览器在CSS方面的兼容性问题。包括IE5.0及之前版本存在CSS注释Bug，无法识别特定格式的CSS注释；IE浏览器不支持CSS2中大部分选择器语法，如属性选择器和子元素选择器等，还给出罗列浏览器CSS问题的网页链接。

1，CSS注释 Bug

在IE5.0（window&&mac）及之前的版本，对于类似于下面的css注释，无法识别。

#commentImmediatelyAfterSelector/* */ { color: #f00; }

2，选择器

IE浏览器都不支持CSS2中的大部分选择器的语法（http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors）

比如使用属性选择器

p[id] { color: #0f0; }

或者子元素选择器

p>span { color: #00f; }

 

http://w3development.de/css/hide_css_from_browsers/

这个网页罗列了各种浏览器中不支持的或者存在bug的css语句

解决跨浏览器兼容性问题：CSS Flexbox布局在IE中的错位BUG
江拥羡橙的博客
09-26 293
在现代前端开发中，CSS Flexbox布局因其灵活性和易用性被广泛采用。然而，许多开发者会遇到一个常见BUG：Flexbox布局在旧版浏览器（如Internet Explorer 10-11）中表现不一致，导致元素错位或尺寸计算错误。本文将一步步分析问题原因，提供可靠解决方案，并附上可即查即用的代码示例。
【CSS】浏览器兼容常见BUG
qq_45677671的博客
01-23 530
7、过滤器 _下划线过滤器： 语法：选择符{_属性：属性值；} 作用：ie6及更低版本才能识别 属性过滤器： 语法：选择符{ * 属性：属性值；} 作用：ie7及更低版本才能识别 \9： 语法：选择符{ 属性：属性值\9；} 作用：ie浏览器版本才能识别 \0： 语法：选择符{ 属性：属性值\0；} 作用：ie7及更低版本不能识别 ！important最高权重关键字过滤器： 语法：选择符{ 属性：属性值 important；} 作用：ie6及更低版本不识别 ...
CSS在IE6浏览器中的bug及解决办法收集
尝试坚持
04-23 731
<br />1、双倍边距bug<br />  bug出现的状况：  <br />    满足下面3个条件才会出现这个BUG:<br />    1）要为块状元素；<br />    2）要左侧浮动；<br />    3）要有左外边距(margin-left)； <br />  解决办法：<br />    只需要在相应的块状元素的CSS树形中加入“display:inline;”，代码如下：<br />#redBlock{<br />width:200px;<br />height:200px;<br /
ie 个版本浏览器 css bug 收集
走自己的路让别人来看
12-01 826
问题 浏览器 DEMO 解决方法 Hacking Rules:property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6; 1 input[button | submit] 不能用 margin:0 auto; 居中 IE8 bug | fixed 为input添加width
css设置ie浏览器的样式,IE浏览器常见的9个css Bug以及解决办法
weixin_30068377的博客
08-03 1013
我们在浏览网页的时候经常看见这样的现象：某个网页在IE6浏览器中打开很正常，但是在IE8里面打开可能完全变形了。或者也有可能出现完全相反的现象。这让Web程序员及设计师往往为了其CSS在各个IE版本下表现怪异而痛苦不已，有时候需要通过专为IE6或者IE8设计单独的定义。IE浏览器则因此被公认为Web程序员的毒药，虽然在微软官网上并没有提供相关的解决方案，但是IE浏览器的兼容性存在的问题却是Web程...
ie11和edge浏览器下REM的bug
fly_home_ysc的博客
08-15 6002
最近在做项目的时候，为了进行响应式的操作，采用了现在出现的一个新的单位——REM，在主流的浏览器都是没什么问题的。但是在ie出现了灵异的bug。bug表述：加载页面的时候，页面的所有元素没有按照对应获取的js来计算出来的rem值来进行显示。但是在鼠标悬浮在对应的元素时会自己动按照对应的计算值来显示，从而就会出现闪烁的bug。由于上述代码还带有 resize 函数，假如 body 元素没有添加 fon
ie自带css定位,CSS实现元素相对于浏览器窗口进行定位_css
weixin_35997999的博客
08-03 2047
文章简介：css实现相对浏览器窗口定位彻底研究.Web Developer / Designer 经常需要将一个元素“固定”在页面的某个位置。例如弹出窗口、漂浮广告位等……本文将详细介绍简单CSS实现元素相对于浏览器窗口进行定位的方法。position:fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性...
目前比较全面的浏览器CSS BUG兼容汇总
德仔
07-10 1803
从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下. 对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. 其它请参考:CSS hack：针对IE6，IE7，firefox显示不同效果 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DI
CSS BUG解决方法以及CSS BUG类的小技巧
最新发布
2401_87288961的博客
09-21 582
如果你给一个行内元素定义宽度,那么它只是在IE6下有效. 所有的HTML元素要么是行内元素要么就好是块元素. 行内元素包括:
CSS判断浏览器
unber的博客
10-06 740
CSS判断浏览器
IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总
09-25
IE6浏览器不支持子选择器，这意味着一些基于子选择器的CSS规则在IE6中无法正常工作。因此，对于IE6，我们通常需要单独编写CSS规则，避免使用子选择器，而使用其他浏览器可以正常解析的CSS属性和选择器。 4. IE6的...
IE CSS Bug及解决方案参考手册
09-25
在处理前端开发中，尤其是在制作跨浏览器兼容的网站时，面对的挑战之一便是处理不同浏览器特有的CSS bug。本文针对的主要是旧版Internet Explorer（IE）浏览器中遇到的CSS兼容性问题及其解决方案。尽管现代浏览器...
vertical-align是什么意思？
The Time With Working
07-16 4519
早上一个同事提出了一个问题，下面这句html元素中的文本为什么不能垂直居中。dddddddda我用浏览器试了一下，它的展示图如下：vertical-align声明在很多中文文档中解释是“决定元素在垂直位置的显示”，它有下面几个参数baseline | sub | super | top | text-top | middle | bottom | text-bottom | baseline：与元
还是得注意DOCTYPE的声明
The Time With Working
11-02 2696
前两天才提到DOCTYPE的问题，今天在博客堂发现也有人为它所困扰。在lostinet《可怕的loose.dtd》这篇文章里谈到因为使用了DOCTYPE使一个样式失效的问题。但是仔细看了看，发现其实并不是因为DOCTYPE在做怪，而是不正确的html代码和没有理解DOCTYPE造成。下面这个html代码是lostinet提到的失效的代码：注意看div的style属性，在red后面多了一个"符号，粗
使用CSS布局的网页
The Time With Working
07-23 2158
通常网页的布局有这么几种：单行单列单行双列单行三列顶行三列 老式的网页采用table来布局整个网页，而标准化的web提倡避免table的布局，使用css来定义呈现信息，对于上述几种网页布局如何使用css来实现呢？Owen Briggs提供了下面这个Boxs网页用16个例子来解决纯css布局问题。 http://www.thenoodleincident.com/tutorials/box_less
别忘了文档类型声明
The Time With Working
10-29 1804
以前在做网页的表格数据展示的时候，我曾经也想做一个固定Header，滚动内容的Table，但是用css的方法没有成功，而脚本的方法太麻烦，就没有用。前几天看到一个网页，也就是用固定Header滚动Body的Table，它是纯粹采用css实现的。难得的不是只用css实现了这种效果，而是它让多种浏览器能够兼容，它支持IE6/5.x、Opera7.x、Mozilla1.x、Konqueror 3.x等。
错误的盒式模型和一个解决办法
The Time With Working
07-15 1651
下面这幅图是我的Blog页面使用Mozilla浏览的时候的情况。 一塌糊涂吧，左边的导航栏覆盖住了右边的内容浏览区，还有一幅图片（我用来做Border背景），漂浮在错误的位置上。为什么会出现这样的问题呢？原因是IE浏览器对CSS Box model的理解和Mozilla的理解不一样，Mozilla按照W3C推荐的CSS标准来创建CSS Box model，IE浏览器对Box model有一个错误
摆脱表格布局的网页
The Time With Working
09-09 1526
尼采呐喊：上帝死了。但是人该怎么办？如果网页中的表格死了，我们又该怎么布局呢，我们能不能通向一条更自由、更有创意的道理？Web标准化设计的先行者们使用XHTML+CSS创造了一个更为绚丽的世界。好了让我们来看看这些先行者们的伟大作品。CSS禅意花园；这里是一个最富盛名的CSS创意天地，本身就充满着无尽的创意。Fyrebase MOZILLA5.0 ；像素精准的标题，主题切换，丰
IE6-IE8 CSS Bug集合与浏览器兼容性解决方案
"这篇文章主要汇总了在开发过程中遇到的IE6、IE7和IE8浏览器中的CSS bug，以及对应的解决策略。作者希望这些经验能帮助到其他前端开发者，并鼓励大家在评论中分享自己的发现和解决方案。文章列举了两个具体的例子：1...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值