解决Firefox(火狐)下display的不兼容问题

9337719@qq.com(netfox) — Fri,06 May 2016 17:27:01 +0800

在脚本中更改某一个元素的display属性,在IE下这么写:frmName.test.style.display="none";是没有什么问题的,但是在火狐下就行不通了,因为Firefox不支持直接用HTML元素id做变量,正确的写法应该是这样的:

document.getElementById("test").style.display="none";

还有一个问题,在IE下这么写是没有问题的:frmName.test.style.display="block";但是在Firefox下就会出现排版错误,一整行的内容会缩到一个内.

正确兼容IE和Firefox的写法应该是这样的:

document.getElementById("test").style.display="";//显示

document.getElementById("test").style.display="none";//隐藏

左右两列自适应高度及三列等高的方法

9337719@qq.com(NetFox) — Wed,03 Jul 2013 18:55:58 +0800

我们在用DIV+CSS布局网页的时候，必然会遇到左右两列自适应高度的问题，就是左边列的背景会随着右边列内容的增加也相应的增加高度，下面就教大家DIV+CSS左右两列自适应高度的方法。
第一种方法：

HTML代码

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

说明：其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点：一是在最外层加上overflow:hidden，然后在左边列加上margin-bottom:-9999px;padding-bottom:9999px;即可。

以上是左列自动适应右列
要使右列适应左列方法同上

第二种方法：

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两列高度自适应</title>
<style type="text/css">

</style>
</head>
<body>

我在左边<br />
我在左边<br />

我在左边<br />
</div>

</div>

</div>
</body>
</html>

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

这种方法可以实现左右二列自动适应

三列等高：

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS等高布局</title>
<style type="text/css">
*{
 margin:0;
 padding:0;
}
#wrap{
 overflow:hidden;
 width:1000px;
 margin:0 auto;
}
#left,#center,#right{
 margin-bottom:-10000px;
 padding-bottom:10000px;
}
#left{
 float:left;
 width:250px;
 background:#00FFFF;
 }
#center{
 float:left;
 width:500px;
 background:#FF0000;
 }
#right{
	float:left;
	width:250px;
	background:#00FF00;
 }
</style>
</head>
<body>
<div id="wrap">
 <div id="left">
  <p>left</p>
  
 </div>
 <div id="center">
  <p>center</p>
  
 </div>
 <div id="right">
  <p>right</p>
  <p>right</p>
  <p>right</p>
 </div>
</div>
</body>
</html>

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

无爱的天空 - DIV+CSS

解决Firefox(火狐)下display的不兼容问题

左右两列自适应高度及三列等高的方法