web标准常见问题整理

繁简对译：[繁简]  字体设置：[大中小] 2009-08-07  作者：大魏  来源：学术部  阅读  次

列举了一些常见，新手经常问的问题。举例并说明解决方法。(内容在下面对应)

1.超链接访问过后hover样式就不出现的问题
2.FF下如何使连续长字段自动换行
3.ff下为什么父容器的高度不能自适应
4. IE6的双倍边距BUG
5. IE6下绝对定位的容器内文本无法正常选择的问题
6. IE6下为什么图片下方有空隙产生
7. IE6下这两个层中间怎么有间隙
8. list-style-image无法准确定位的问题
9. LI中内容超过长度后以省略号显示的方法
10.web标准中定义id与class有什么区别吗
11.如何垂直居中文本
12.如何对齐文本与文本输入筐
13.为什么FF下面不能水平居中呢
14.为什么FF下文本无法撑开容器的高度
15.为什么IE6下容器的宽度和FF解释不同呢
16.为什么web标准中IE无法设置滚动条颜色了
17.为什么我定义的样式没有作用呢
18.为什么无法定义1px左右高度的容器
19.为什么这个背景颜色无法显示
20.怎么样才能让层显示在FLASH之上呢
21.怎样使一个层垂直居中于浏览器中
22 .图片垂直与容器内
23.如何让三列横向排列
24.通用的加入收藏夹代码
25.复制到系统剪贴板之IE,ff兼容版
26.javascript为FF设置首页
27.IE6使用滤镜使PNG图片透明后，容器内链接失效的问题
28.禁用文本框中文输入法的通用方法

1.超链接访问过后hover样式就不出现的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
/*<![CDATA[*/
a:link {
    color:red
    }
a:hover {
    color:blue
    }
a:visited {
    color:green
    }
a:active {
    color:orange
    }
/*]]>*/
</style>
</head>
<body>
<a href="#">
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
</a>
</body>
</html>

代码:

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A

2.FF下如何使连续长字段自动换行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
/*<![CDATA[*/
div {
    width:300px;
    word-wrap:break-word;
    border:1px solid red;
    }
/*]]>*/
</style>
</head>
<body>
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<script type="text/javascript">
// <![CDATA[
function toBreakWord(intLen){
var obj=document.getElementById("ff");
var strContent=obj.innerHTML; 
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"&#10;"; 
strContent=strContent.substr(intLen,strContent.length); 
}
strTemp+="&#10;"+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById  &&  !document.all)  toBreakWord(37)
// ]]>
</script>
</body>
</html>

众所周知IE中直接使用    word-wrap:break-word 就可以了, 这里FF中我们使用JS插入&#10;的方法来解决

3.ff下为什么父容器的高度不能自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
/*<![CDATA[*/
div {
    width:200px;
    border:1px solid red
    }
p {
    float:left;
    width:100px;
    }
/*]]>*/
</style>
</head>
<body>
<div><p>web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全</p></div>
</body>
</html>

为什么这个P撑不开DIV呢？解决的办法是在div 与 p 之间插入<div style="clear:both"></div>清除掉这个p的浮动.
什么？你在IE下也碰到过类似问题！那么参考：http://bbs.blueidea.com/viewthread.php?tid=2636904

4. IE6的双倍边距BUG

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
/*<![CDATA[*/
body {
    margin:0
    }
div {
    float:left;
    margin-left:10px;
    width:200px;
    height:200px;
    border:1px solid red
    }
/*]]>*/
</style>
</head>
<body>
<div>
<a href="#">
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
</a>
</div>
</body>
</html>

代码:

浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline

5. IE6下绝对定位的容器内文本无法正常选择的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
/*<![CDATA[*/
div {
    position:absolute;
    top:100px;
    left:100px;
    width:200px;
    height:200px;
    border:1px solid red
    }
/*]]>*/
</style>
</head>
<body>
<div>
<a href="#">
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
</a>
</div>
</body>
</html>

代码:

上面的问题在IE6、7中存在，解决问题的办法是让IE进入到quirks mode。关于quirks mode的相关知识，请参考：http://www.microsoft.com/china/msdn/library/webservices /asp.net/ASPNETusStan.mspx?mfr=true
aoao:在IE6版本是6.0.2900.2180.xpsp_sp2.gdr.070227-2254好像依然存在问题，加了背景色依然无效。接着测试中。。。

6. IE6下为什么图片下方有空隙产生

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
/*<![CDATA[*/
div {
    border:1px solid red;
    background:orange;
    }
img {
    width:276px;
    height:110px;
    }
/*]]>*/
</style>
</head>
<body>
<div>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="google" />
</div>
</body>
</html>

代码:

解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
还可以设置父容器的字体大小为零，font-size:0

7. IE6下这两个层中间怎么有间隙

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
/*<![CDATA[*/
.left {
    float:left;
    width:100px;
    height:100px;
    background:red
    }
.right {
    width:100px;
    height:100px;
    background:orange;
    overflow:hidden;
    }
/*]]>*/
</style>
</head>
<body>
<div class="left">aaaaaa</div>
<div class="right">aaaaaa</div>
</body>
</html>

代码:

这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

8. list-style-image无法准确定位的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
/*<![CDATA[*/
li {
    list-style:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif");
    }
li a {
    position:relative;
    top:-5px;
    font:12px/25px 宋体;
    }
/*]]>*/
</style>
</head>
<body>
<ul>
<li><a href="#">web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全</a></li>
</ul>
</body>
</html>

 

上一篇：CSS.JS文件发布机制的思考 下一篇：display:inline-block的深入理解

相关文章

打印 收藏 关闭