java中常见的bug_【java技术】IE中布局常见bug

1

IE中布局常见bug

今天：IE中布局常见bug，一起来学习学习~

1.导航栏显示异常

网页导航栏是比较常见也是比较常用。

实现代码如下:

我们希望得到的结果。

但是在IE6 和7却表现的让人很诧异。

解决这个问题第一个方案是: 使用CSS hack。

给每个

标签加上样式： *float: left;

第二种方式: 给每个

标签加上样式： display: inline;

2.超出容器边界

这个错误产生的原因是给父元素设置overflow:auto属性，同时给子元素设置了position: relative;造成的。

我们来看看神奇的IE6和7会有什么效果。

代码如下:

我们希望得到的结果。

但在IE6 和7中，却会出现以下效果。

这个错误让人完全不能接受。

但是解决这个问题却相对简单，我们只需要删除#inner 中的position:relative即可。

3、Float 布局错误

这个错误产生的原因也很简单。在IE6和7中，设置float属性并且设置margin属性左右外边框会是双倍距离。

代码如下:

我们希望得到的结果。

但在神奇的IE6 和7中，却会出现以下效果。

这个布局方式是极其常用的，而在IE下却如此不堪。上面也分析过产生的原因。

解决办法是使用 CSS hack;

给float的块标签单独设置margin。

代码如下:

更多Java开发培训视频教程及技术文章请关注源代码教育与官方微博