web前端

html+css+javascript+jquery+ajax

让人迷糊的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 }



评论