网站常见问题及解决方法（div/css）

来源：互联网发布：网络教育平台编辑：程序博客网时间：2024/05/17 08:51

网站常见问题及解决方法（div/css）

1.在ul里嵌入form表单，在IE6，IE7，显示会不在同一高度上。

2.IE7下异常出现水平滚动条；overflow-x:hidden; 可以解决。

3.在不知道模块高度的情况下不必设定高度，设定一个最小高度即可，让其自动随内容变化变化。

4.使整个网站变黑白代码：body{filter:Gray;} img{filter:Gray;}

5.IE6 不支持png透明图片。解决办法将图片存为“索引颜色” 强制色：无；即可解决，test OK; 把.png换成.gif格式。就好。test OK

6.IE6 不支持min-属性。设置height：auto； test oK

7.文本框和密码框在IE下宽度不一样。解决办法;input {font-family:Verdana, Arial, Helvetica, sans-serif,"宋体"} test IE6,7,8,9. FF.360.谷歌显示正常。

8.ie6不支持margin值为负；解决办法：加position:relative; test OK!

9.在一个div中height和line-height的值设成一样大。否者IE6会显示不正常；

10.FF下文本框和按钮水平上差几像素：解决办法：为input加上 vertical-align:middle 可以解决.

11.CSS调节背景透明度：opacity:0 .2; //支持Firefox, Safari, Chrome
filter: alpha(opacity=20);//支持IE；

12.给DIV加上overflow:hidden;可以解决一些不必要的问题。

13.IE7下面默认DIV是有高度的，所以要设置DIV的高度，才能避免一些问题。

14.页面的最小宽度 min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类, 然后CSS这样设计：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

15.让所有浏览器包括IE6即支持最大高度又支持最小高度。
.yangshi{
Max-Height:620px;Min-Height:40px;
_height:expression(this.scrollHeight > 620 ? "620px" : (this.scrollHeight < 40 ? "40px" : "auto"));}

IE6支持Max-Height和支持Min-Height CSS代码

_height:expression(this.scrollHeight > 620 ? "620px" : (this.scrollHeight < 40 ? "40px" : "auto"));
说明：以上代码作用是让对象的最小高度为40px，最大高度为620px的CSS样式属性

16. 去掉链接点击是的虚线边框：a:focus { outline:0; } test OK！！！；

17. LI中内容超过长度后以省略号的显示方法

li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}

18.<a> 在IE6，7 下面重新定义宽和高的代码：｛
display:block;
display:-moz-inline-stack;
display:inline-block;
zoom: 1;
overflow:hidden;
Test OK！

19.图片在IE6 下面有空隙产生：设置img为 display:block或vertical-align属性为：top,middle,bottom,text-bottom 可以解决； Test OK！

20.首字下沉（伪类）:first-letter｛｝

21.CSS背景透明：全透明代码:{background:transparent}

半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;} 见26条

22.去掉点击链接时出现的虚线<a href="#" onfocus="this.blur()"></a>

23.三角样式
.test{width:0; height:0; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}
斜角
.test{width:0; height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;}

说明：
以上的测试代码纯粹为了说明原理，所以使用#ffffff白色边框，通过于背景融合来隐藏边框。在实际的操作中，应该使用transparent透明属性，例如border-color:#ff3300 #ff3300 transparent transparent;，这同样会有问题，IE6浏览器不支持transparent透明属性，不过没有关系，就border生成三角技术而言，直接设置对应的透明边框的border-style属性为dotted或是dashed即可解决这一问题，为什么使用dotted和dashed可以修复此问题呢？您有兴趣可以参见默尘的这篇文章Dotted&Dashed终极分析及IE6透明边框。

<strong style="float: left; border-style: solid; border-width: 10px; border-color: #000 #fff #fff #fff; height:0"></strong>

24.
div {background:red;overflow:hidden; zoom:0.08;line-height:1px;}

25.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。

26.最低高度(兼容IE6)
{
height:auto!important;
height:200px;
min-height:200px;
}

27. 给Flash设置透明属性可使层显示在Flash之上
<param name="wmode" value="transparent" /> <!-- 解决IE上的问题 //>
<embed wmode="transparent" …… > <!-- 解决FireFox上的问题 //>