CSS实例教程:IE6奇数宽度或高度的bug

2016-02-20 00:16 19 1 收藏

今天图老师小编要向大家分享个CSS实例教程:IE6奇数宽度或高度的bug教程，过程简单易学，相信聪明的你一定能轻松get！

【 tulaoshi.com - Web开发】

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）IE6真是太疯狂了。今天由于项目需要做了这么一个布局：一个外部的相对定位div，内部一个绝对定位的div（right:0），
如图：
uploads/200905/14_145449_22008104223759.png

uploads/200905/14_145449_22008104223759.png

可是在IE6下查看，却变成了right:1px的效果了：

uploads/200905/14_145538_62008104223844.png

IE6还有奇数宽度的bug，解决方案就是将外部相对定位的div宽度改成偶数。
查看源码：

CSS代码#out {
width: 609px;/*这里宽度为奇数，bug就出现了！！改成偶数就OK了*/
height: 300px;
position: relative;
background:#FF0000;
color:#FFF;
}
#inn {
width: 200px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background:#000000;
}
XML/HTML代码div id=out
div id=inn此处为内部绝对定位的 DIV/div
/div

来源:http://www.tulaoshi.com/n/20160220/1631568.html

上一篇： CSS教程:详解CSS特定值
下一篇：轻易创建css导航工具:CSS Tab Designer2

看过《CSS实例教程:IE6奇数宽度或高度的bug》的人还看了以下文章更多>>

IE CSS Bug

标签： Web开发

最让人头痛的当数IE，特别是IE6。搞定了IE6，基本也就能称霸半个江山了。搞定了IE，也相当于占领了7、80%的领地。你想做一个统治页面兼容的主么？反正我是想的。作为一名前端，我们通常要做的就是让页面在各系统A-Grade浏览器，甚至网站浏览份额0.1%以上的浏览器上良好显示。当然，还有性能问题。不过，今天要说的是样式的兼容问题。在IE/Mo...

针对firefox ie6 ie7的css样式

标签： Web开发

本人专业是做UI的，写CSS已经有好几年了，目前刚刚在博客发布关于CSS的文章，欢迎有问题的朋友在有问必答论坛提问，我一定尽力解答。 1 针对firefox ie6 ie7的css样式现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使...

CSS技巧：IE6用import导入CSS的问题

标签： Web开发

在ie 6中可以先写CSS再加import比如 p {} @import url("base.css"); 但在浏览器里死活是渲染不出来. 用抓包工具跟踪, 根本就没有请求... 如果去掉上面的p选择符,或者放到import下方就可以渲染, 按标准来说import是要放首行的,但aoao说IE6是可以先放其它的CSS再加import的. @import url("base.css"); p {} 如果我再...

IE6在解析浮动:3像素Bug

标签： Web开发

在一个典型的浮动中，如下面的图片所示：灰色矩形是外部容器，绿色容器在外部容器内向左浮动，未浮动的部分包围着浮动部分。但是IE6在解析这样的浮动时，会莫名的给靠紧浮动部分的未浮动部分添加3个像素的边距。为了更加直观，让我们将Firefox和IE6中的效果做一对比（上图是Firefox中的效果，下图是IE6中的效果）：你会清晰的观察...

CSS教程：汇总让IE6崩溃的几种方法

标签： Web开发

经常遇到莫名其妙让IE6崩溃的事情。今天看到了一篇好文章，网页教学网整理整理发上来，以后开发的时候要注意了。鉴于国内IE6的市场份额还在主流的情况，一定要避免出现以下情况。 IE6真脆弱啊 1.设置 scrollbar-base-color ，css里给table做了定位，再通过js改变其定位IE6就崩溃了。关键代码： style type="text/css" &nbs...

查看更多精彩>>