首页 > 网页教程 > CSS > 正文

IE的几个最常见BUG及解决方案

2010-01-15 11:11:04   作者:网友   来源:互联网

1. 居中布局

创建一个CSS定义把一个元素放到中间的位置,可能是每一个Web开发人员都会做的事情。最简单的做法是为你的元素增加一个margin: auto; ,然而 IE 6.0 会出现很多奇怪的行为。让我们来看一个例子。

#container{
 border: solid 1px #000;
 background: #777;
 width: 400px;
 height: 160px;
 margin: 30px 0 0 30px;
}

#element{
 background: #95CFEF;
 border: solid 1px #36F;
 width: 300px;
 height: 100px;
 margin: 30px auto;
}

下面是我们所期望的输出:

Tutorial Image

但IE却给我们这样的输出:

Tutorial Image

这应该是IE 6对margin的 auto 并没有正确的设置。但幸运的是,这是很容易被修正的。

解决方法:

最简单的方法是在父元件中使用text-align: center 属性,而在元件中使用text-align: left。

#container{
 border: solid 1px #000;
 background: #777;
 width: 400px;
 height: 160px;
 margin: 30px 0 0 30px;
 text-align: center;
}

#element{
 background: #95CFEF;
 border: solid 1px #36F;
 width: 300px;
 height: 100px;
 margin: 30px 0;
     text-align: left;
}


栏目搜索>>分类导航
Flash幻灯 jQuery幻灯 JS幻灯 Flash相册 jQuery相册 图片特效 导航菜单 广告代码 在线客服 表单按钮 其它特效

HTML CSS JavaScript Dreamweaver Fireworks 设计分享

建站教程 网站运营 实用工具 网页模板 网页素材

CSS酷站 网上购物 设计团队 设计博客
教程排行榜
21个令人惊叹的CSS技术(案例)展示
看这些用CSS3绘制的图标,你震撼了吗
HTML5的Video标签详细说明手册
如何使一个DIV层居中于浏览器中?
加一段代码让IE6支持hover伪类效果
IE PNG Fix—让IE6完美支持PNG透明图片的插件
CSS Sprite(CSS精灵)的优点和使用方法
最新的IE6、IE7和IE8的CSS BUG汇总列表
深入理解CSS的inherit与auto之间区别
用浮动清除LI元素在IE6中底部3像素的BUG
CSS3教程:17种用CSS实现的很酷炫的立体网...
解决IE6下PNG图片透明的最佳方法
IE的几个最常见BUG及解决方案
DIV+CSS布局两列右列宽度自适应布局的不同...
CSS样式的postion属性absolute和fixed的区别
CSS教程:用相对定位实现简单的图片边框阴...
下载排行榜
基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码
半透明立体质感的宽屏flash+xml焦点幻灯代码
简洁效果多图切换flash幻灯焦点图代码
带标题和数字导航的JS焦点幻灯特效代码
适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码
31款简单实用的CSS+JS下拉菜单脚本
3D立体效果金字塔环形旋转的flash+xml相册代码
基于jQuery实现的瀑布流布局列表特效代码
透明质感上下滑动带小图预览5屏JS焦点图幻...
超酷的3D摩天轮flash+xml相册幻灯图片代码
能沿多个方向滑动切换的jquery幻灯代码
自带多种幻灯效果支持缩略图导航的jquery画...
可改图片尺寸和张数的flash幻灯轮换代码
很好看的带缓冲效果CSS下拉菜单导航代码
基于jquery很有趣的360度全景图片预览特效
6屏幻灯上下滑动式带缩略图和文字介绍的fla...