实例解决FF下常遇到的5个bug

日期:2009-08-19作者:woniu

字体大小: 小中大

前段时间整理了在ie6下常遇到的6个Bug。今天再整理下，在FF（火狐浏览器下）最长出现的5个问题。方便以后查阅。
1.FF下文本无法撑开固定高度的容器

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

原因：标准浏览器中，固定高度值的容器是不会像在ie6下一样被撑开的。如果想既固定高度又想超过被撑开，就要把height换成最小高度：min-height。定义如下：

Example Source Code

{
height:auto!important;
height:200px;
min-height:200px;
}

2.父容器高度不能自适应。

HTML代码

<!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>蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者蜗爱css——css初学者</p></div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

因为p设置了float:left;所以撑不开外面的div，这里要在div与p之间插入<div style="clear:both"></div>清除掉这个p的浮动.
3.FF下让连续的长字段自动换行

HTML代码

<!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)+"
";  
strContent=strContent.substr(intLen,strContent.length);  
}
strTemp+="
"+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById  &&  !document.all)  toBreakWord(37)
// ]]>
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

IE下直接使用word-wrap:break-word 就可以了, 这里FF中我们使用JS插入
的方法来解决。
4.FF下不能水平居中

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

text-align在FF下不起作用，所以我们要设置容器的左右补丁为auto.
5.FF下设置首页的js代码

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[本日志由 woniu 于 2009-09-08 03:18 PM 编辑]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags: FF兼容浏览器兼容火狐兼容 div+css实例

相关日志:

评论: 0 | 引用: 0 | 查看次数: -

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.