让人迷糊的WEB兼容问题回顾
1. IE6的双倍边距BUG
浮动后本来外边距10px,但IE解释为20px,解决办法是加上:
display: inline;
更详细的解释请见《IE6双倍边距——IE布局BUG集锦》
2. IE6下为什么图片下方有空隙产生
设置img 为display:block 或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom 都可以解决。
更详细的解释请见《图片下边的多余空隙——IE布局BUG集锦》
3. 让一个层垂直居中于浏览器
使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度的一半
div {position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; }
4. Web标准中IE如何设置滚动条颜色
IE中是将滚动条样式写在body元素上,而WEB标准中则是写在html上:
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
5. 如何使flash动画不盖住层
a. 关键属性:
<param name="wmode" value="opaque" />
cembed wmode="opaque"></embed>
b. 基于Adobe代码:
<param name="wmode" value="transparent" />
6. 未知高度图片垂直居中
解决这个问题的前提条件是该图片所在父级层必须是高度确定的,同时所谓的图片未知高度也应该是以父级层的高度为上限,即 0<图片高度<父级层高度;注意事项是,该层也不要有太复杂的html结构,不然也还是没法取得完美效果。我个人觉得解决这个问题纯粹是挑战WEB标准的技巧性手法而已,实际开发中应是优化整体的html结构代码规避这类问题是最好了。
1 <style>
2 .box {
3 /*非IE的主流浏览器识别的垂直居中的方法*/
4 display: table-cell;
5 vertical-align:middle;
6
7 /*设置水平居中*/
8 text-align:center;
9
10 /* 针对IE的Hack */
11 *display: block;
12 *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
13 *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
14
15 width:300px;
16 height:200px;
17 border: 1px solid #eee;
18 overflow:hidden;
19
20 }
21 .box img {
22 /*设置图片垂直居中*/
23 vertical-align:middle;
24 }
25 </style>
7. 在不使用 border 样式的情况下,画出一条高为1px的横线
div.line {height:1px; overflow:hidden; background:#0000FF}
8. 如何对齐文本和文本输入框
给input元素定义vertical-align:middle
9. 标准浏览器中的一个容器,在固定其高度的同时,又要在高度需要被撑开的时候撑开
div.heightAuto {border:1px solid #0000FF; width:100px; height:auto; _height:40px; min-height:40px;}
10. float闭合通用解决方案
1 .clearfix:after {
2 content: ".";
3 display: block;
4 clear: both;
5 visibility: hidden;
6 line-height: 0;
7 height: 0;
8 }
9 .clearfix {
10 display: block;
11 }
12 html[xmlns] .clearfix {
13 display: block;
14 }
15 * html .clearfix {
16 height: 1%;
17 }
评论