你好,欢迎来到深圳市中讯通博科技开发有限公司!
新闻动态
媒体报道
 
曾经让人迷糊的WEB兼容问题回顾

1. IE6的双倍边距BUG
浮动后本来外边距10px,但IE解释为20px,解决办法是加上:

1 display: inline;
更详细的解释请见《IE6双倍边距——IE布局BUG集锦》

2. IE6下为什么图片下方有空隙产生
设置img 为display:block 或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom 都可以解决。
更详细的解释请见《图片下边的多余空隙——IE布局BUG集锦》

3. 让一个层垂直居中于浏览器
使用百分比*定位,与外补丁负值的方法,负值的大小为其自身宽度高度的一半

1 div {
2 position:absolute; 
3 top:50%; 
4 left:50%; 
5 margin:-100px 0 0 -100px; 
6 width:200px; 
7 height:200px; 
8 border:1px solid red; 
9 }


4. Web标准中IE如何设置滚动条颜色
IE中是将滚动条样式写在body元素上,而WEB标准中则是写在html上:

1 html { 
2 scrollbar-face-color:#f6f6f6; 
3 scrollbar-highlight-color:#fff; 
4 scrollbar-shadow-color:#eeeeee; 
5 scrollbar-3dlight-color:#eeeeee; 
6 scrollbar-arrow-color:#000; 
7 scrollbar-track-color:#fff; 
8 scrollbar-darkshadow-color:#fff; 
9 }

5. 如何使flash动画不盖住层
a. 关键属性:

1 <param name="wmode" value="opaque" />
2 <embed wmode="opaque"></embed>

b. 基于Adobe代码:

1 <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的横线

1 div.line {height:1px; overflow:hidden; background:#0000FF}

8. 如何对齐文本和文本输入框
给input元素定义vertical-align:middle

9. 标准浏览器中的一个容器,在固定其高度的同时,又要在高度需要被撑开的时候撑开

1 div.heightAuto {border:1px solid #0000FF; width:100px; height:auto; _height:40px; min-height:40px;}

 

发布时间 2009/11/10