IE6的一些样式总结
来源:互联网 发布:python爬虫抓取音乐 编辑:程序博客网 时间:2024/06/03 16:37
Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗,让你的开发生产率严重下降。下面是一个教程,告诉你9个IE上最常见的BUG以及如何解决它们。 创建一个CSS定义把一个元素放到中间的位置,可能是每一个Web开发人员都会做的事情。最简单的做法是为你的元素增加一个margin: auto; ,然而 IE 6.0 会出现很多奇怪的行为。让我们来看一个例子。 下面是我们所期望的输出: 但IE却给我们这样的输出: 这应该是IE 6对margin的 auto 并没有正确的设置。但幸运的是,这是很容易被修正的。 解决方法 最简单的方法是在父元件中使用 text-align: center 属性,而在元件中使用 text-align: left 。 几乎所有的Web开发者都会使用list来创建导航条。下面是你可能会用到的代码: 一个符合标准的浏览器会是下面这样: 但IE却是这样的: 下面是两个解决方法 解决方法一 设置li元件的float属性。 解决方法二 设置 display: inline 属性。 请看下面的代码: 期望的结果是: IE的结果是: 解决方案 和上面那个BUG的解决方案一样,设置 display: inline 属性可以解决问题。 我们发现在IE中使用 height: XXpx 这样的属性无法设置比较小的高度。下面是个例子(注意高度是2px): 期望结果: 2px的元件加1px的边框. IE的结果: 解决方案一 这个BUG的产生原因很简单,IE不允许元件的高度小于字体的高度,所以,下面的fix是设置上字体大小。 解决方案二 但是最佳的解决方法是使用 overflow: hidden 。 这个BUG是很难看的。当父元件中使用了 overflow 的 auto 属性,并且在其里放入相关元件。你会看来里面的元件会跨出来。下面是一个示例: 期望的结果: IE的结果: 解决方法 设置 position: relative;属性 Internet Explorer曲解了“盒子模子”可能是最不可原谅的事情了。IE 6 这个半标准的浏览器回避了这个事情,但这个问题还是会因为IE运行在“怪异模式”下出现。 两个Div元件。一个是有fix的,一个是没有的。而他们不同的高和宽加上padding的总合却是不一样的。下图的上方是被修正的,下方则没有。 解决方法 我相信这个事情即不需要解释也不需要演示,这应该是大多数人都明白的。下面是一个很相当怪异的解决方案 上面的定义也就是说: 是的,你要原来的长和宽上加上了padding。但这个fix只会作用于IE了的“怪异模式”,所以你不需要担心在IE6的正常模式下会有问题。 IE忽略了min-height。 解决方法一 这个fix由 Dustin Diaz提供。其利用了 !important 下面是代码片段: 解决方法二 使用无table的布局最重要的就是使用CSS的float元件。在很多情况下,IE6处理起来好像在摸索阶段,有些时候,你会发现很多奇怪的行为。比如在其中有一些文本的时候。 来看一下下面这个示例: 期望结果: IE的结果: 你可以看到其中的不同了 解决方法 要解决这个问题没有什么好的方法。只有一个方法,那就是使用 overflow: hidden 。 先看下面的例子 期望结果: IE的结果: Fortunately, there are a plethora of fixes you could try. 解决方法一 定义height来解决 解决方法二 解决方法三 为 li 加上display: inline。 调界面是一件很难的事,调一个CSS的HTML界面是一件更难的事,在IE下调一个CSS的HTML界面是难上加难的事。1. 居中布局
#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
;
}
#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
;
}
2. 楼梯式的效果
<
ul
>
<
li
><
a
href
=
"#"
></
a
></
li
>
<
li
><
a
href
=
"#"
></
a
></
li
>
<
li
><
a
href
=
"#"
></
a
></
li
>
</
ul
>
ul {
list-style
:
none
;
}
ul li a {
display
:
block
;
width
:
130px
;
height
:
30px
;
text-align
:
center
;
color
:
#fff
;
float
:
left
;
background
:
#95CFEF
;
border
:
solid
1px
#36F
;
margin
:
30px
5px
;
}
ul li {
float
:
left
;
}
ul li {
display
:
inline
}
3. float元件的两倍空白
#element{
background
:
#95CFEF
;
width
:
300px
;
height
:
100px
;
float
:
left
;
margin
:
30px
0
0
30px
;
border
:
solid
1px
#36F
;
}
#element{
background
:
#95CFEF
;
width
:
300px
;
height
:
100px
;
float
:
left
;
margin
:
30px
0
0
30px
;
border
:
solid
1px
#36F
;
display
:
inline
;
}
4. 无法设置微型高度
#element{
background
:
#95CFEF
;
border
:
solid
1px
#36F
;
width
:
300px
;
height
:
2px
;
margin
:
30px
0
;
}
#element{
background
:
#95CFEF
;
border
:
solid
1px
#36F
;
width
:
300px
;
height
:
2px
;
margin
:
30px
0
;
font-size
:
0
;
}
#element{
background
:
#95CFEF
;
border
:
solid
1px
#36F
;
width
:
300px
;
height
:
2px
;
margin
:
30px
0
;
overflow
:
hidden
}
5. 跨出边界
<
div
id
=
"element"
><
div
id
=
"anotherelement"
></
div
></
div
>
#element{
background
:
#95CFEF
;
border
:
solid
1px
#36F
;
width
:
300px
;
height
:
150px
;
margin
:
30px
0
;
overflow
:
auto
;
}
#anotherelement{
background
:
#555
;
width
:
150px
;
height
:
175px
;
position
:
relative
;
margin
:
30px
;
}
#element{
background
:
#95CFEF
;
border
:
solid
1px
#36F
;
width
:
300px
;
height
:
150px
;
margin
:
30px
0
;
overflow
:
auto
;
position
:
relative
;
}
6. Fixing the Broken Box Model
#element{
width
:
400px
;
height
:
150px
;
padding
:
50px
;
}
#element {
width
:
400px
;
height
:
150px
;
height
:
250px
;
width
:
500px
}
7. 设置min-height和min-width
#element {
min-height
:
150px
;
height
:
auto
!important
;
height
:
150px
;
}
#element {
min-height
:
150px
;
height
:
150px
;
}
html>body #element {
height
:
auto
;
}
8. Float 布局错误行为 Misbehaving
<
div
id
=
"container"
>
<
div
id
=
"element"
>http://net.tutsplus.com/</
div
>
<
div
id
=
"anotherelement"
></
div
>
</
div
>
#element, #anotherelement{
background
:
#95CFEF
;
border
:
solid
1px
#36F
;
width
:
100px
;
height
:
150px
;
margin
:
30px
;
padding
:
10px
;
float
:
left
;
}
#container{
background
:
#C2DFEF
;
border
:
solid
1px
#36F
;
width
:
365px
;
margin
:
30px
;
padding
:
5px
;
overflow
:
auto
;
}
#element{
background
:
#C2DFEF
;
border
:
solid
1px
#36F
;
width
:
365px
;
margin
:
30px
;
padding
:
5px
;
overflow
:
hidden
;
}
9. 在list项目门的空行
<
ul
>
<
li
><
a
href
=
"#"
>Link 1</
a
></
li
>
<
li
><
a
href
=
"#"
>Link 2</
a
></
li
>
<
li
><
a
href
=
"#"
>Link 3</
a
></
li
>
</
ul
>
ul {
margin
:
0
;
padding
:
0
;
list-style
:
none
;
}
li a {
background
:
#95CFEF
;
display
:
block
;
}
li a {
background
:
#95CFEF
;
display
:
block
;
height
:
200px
;
}
li a {
background
:
#95CFEF
;
float
:
left
;
clear
:
left
;
}
li {
display
:
inline
;
}
结论
- IE6的一些样式总结
- IE6中一些样式Bug及其解决方法
- 学到的一些CSS样式 总结下
- 样式设计中总结的一些要点
- CSS兼容IE6,IE7和FF的一些总结
- IE6的一些兼容性问题
- IE6的一些小缺陷
- IE6下的一些常见问题
- 针对firefox ie6 ie7的css样式
- 针对firefox ie6 ie7的css样式
- 针对IE6写特殊样式的方法
- IE6 下面CSS样式覆盖的BUG
- 对于一些css样式的巧妙方法进行总结。
- 对于一些css样式的巧妙方法进行总结。
- 去除android或者iOS系统默认的一些样式总结
- bootstrap中常用的一些样式制作(自我总结)
- 复变函数网站系统的一些体验——RGB和CMYK图片的不同、IE6下的一些样式兼容性设置
- 页面的一些样式
- 基于USB枚举过程的详细分析
- 【Android游戏开发之三】剖析 SurfaceView ! Callback以及SurfaceHolder!!
- 几道智力题
- 转战ns3,计划实现一个完整的异构网络模型
- Name That Number
- IE6的一些样式总结
- 电源中的纹波、谐波和噪声
- 配置Mysql与Python
- 1*1 引发的思考
- 洗涤标识
- java面板加载图片程序
- win7此更新不适合于您的计算机
- godaddy的长期有效优惠码
- 用windows live writer写csdn博客