IE和Firefox下Div背景颜色的问题
来源：互联网 发布：php 聊天室 设计思路 编辑：程序博客网 时间：2024/05/02 04:42
网站重构时，在遨游浏览器下调试，所以没有感觉有什么问题。使用IE7和Firefox打开却发现最外层Div的背景颜色不起作用.
由于最外div的高度是根据内层div的高度自动伸展，所以不能在css中定义它的高度，这样看起很不美观。分析了一下，在最外层div的css中加了一个overflow:hidden;，再刷新页面，竟然正常了
================index.html========================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="" style="width:700px;">
<div class="left1" style="width:14%;float:left;text-align:center;">Facility Name</div>
<div class="left1" style="width:14%; float:left;text-align:center;">Abreviation</div>
<div class="left1" style="width:10%; float:left;text-align:center;">First</div>
<div class="left1" style="width:10%; float:left;text-align:center;">Last</div>
<div class="left1" style="width:20%; float:left;text-align:center;">Phone Number</div>
<div class="left1" style="width:10%; float:left;text-align:center;">Active</div>
<div class="all1" style="width:10%; float:left;text-align:center;">EMail</div>
<div class="right1" style="width:10%; float:left;text-align:center;">Edit</div>
<div style="width:700px;overflow:hidden; float:left;" onmouseout="this.style.backgroundColor='#FFFFFF';" onmouseover="this.style.backgroundColor='#FFFF55';">
<div class="left2" style="width:14%;float:left;text-align:left;">g</div>
<div class="left2" style="width:14%; float:left;text-align:left;">gsd</div>
<div class="left2" style="width:10%; float:left;text-align:left;">g</div>
<div class="left2" style="width:10%; float:left;text-align:left;">g</div>
<div class="left2" style="width:20%; float:left;text-align:left;">g</div>
<div class="left2" style="width:10%; float:left;text-align:center;">g</div>
<div class="all2" style="width:10%; float:left;text-align:center;">g</div>
<div class="right2" style="width:10%; float:left;text-align:center;">g</div>
</div>
<!--onmouseout="this.style.backgroundColor='#FFFFFF';" onmouseover="this.style.backgroundColor='#FFFF55';"-->
<div class="background" style="width:700px; overflow:hidden; float:left;" onmouseout="this.style.backgroundColor='#ECFFEC';" onmouseover="this.style.backgroundColor='#FFFF55';">
<div class="left2 " style="width:14%;float:left;text-align:left;">g</div>
<div class="left2 " style="width:14%; float:left;text-align:left;">g</div>
<div class="left2 " style="width:10%; float:left;text-align:left;">g</div>
<div class="left2 " style="width:10%; float:left;text-align:left;">g</div>
<div class="left2 " style="width:20%; float:left;text-align:left;">g</div>
<div class="left2 " style="width:10%; float:left;text-align:center;">g</div>
<div class="all2 " style="width:10%; float:left;text-align:center;">gsadf</div>
<div class="right2 " style="width:10%; float:left;text-align:center;">gd</div>
</div>
</div>
</body>
</html>
=========================================index.css===============================
@charset "utf-8";
* {
}
.right1{
border-top:1px solid #a1a1a1;
border-right:1px solid #a1a1a1;
border-bottom:1px solid #a1a1a1;
background-image: url(Img/header_bg.gif);
background-repeat: repeat-x;
color: #FFF;
font:15px/20px Arial;
}
.left1{border-top:1px solid #a1a1a1;border-left:1px solid #a1a1a1;border-bottom:1px solid #a1a1a1;color: #FFF;
background-image: url(Img/header_bg.gif);background-repeat: repeat-x;font:15px/20px Arial;}
.all1{border:1px solid #a1a1a1;background-image: url(Img/header_bg.gif);background-repeat: repeat-x;color: #FFF;
font:15px/20px Arial;}
.right2{border-right:1px solid #a1a1a1;border-bottom:1px solid #a1a1a1; }
.left2{border-left:1px solid #a1a1a1;border-bottom:1px solid #a1a1a1;}
.all2{border-right:1px solid #a1a1a1; border-left:1px solid #a1a1a1;border-bottom:1px solid #a1a1a1;}
.background{background:#ECFFEC;}
tr{/*background:#FFFF55;*/
event:expression(onmouseover = function(){this.style.backgroundColor='#FFFF55'},onmouseout = function(){this.style.backgroundColor='#ECFFEC'});
}
====================================================================
- IE和Firefox下Div背景颜色的问题
- IE和Firefox下Div背景颜色的问题
- 解决IE和Firefox下flash挡住div层的问题
- 解决IE和Firefox下，div层被flash遮挡住的问题
- 解决IE和Firefox下flash挡住div层的问题
- IE和Firefox下的文件路径问题
- IE与Firefox下对CSS定义div高度的解析问题
- IE下PNG图片作背景颜色不一致问题
- 让Div在IE和Firefox下自适应高度
- 解决ie下空背景透明div层问题
- 关于在IE下打印页面背景图片和背景颜色丢失的解决方案
- IE firefox div 设置left的属性问题
- IE和FIREFOX下CSS的区别
- IE和FIREFOX下CSS的区别
- IE和Firefox下javascript的不同
- IE和Firefox下的Cookie兼容问题
- ie 和 firefox宽度的问题
- IE和Chrome、FireFox的ContentType问题！
- 约瑟夫环问题
- Oracle排序分页方法
- FRM-40735 ON -ERROR trigger raised unhandled exception ORA-04063
- 推荐10款非常优秀的 HTML5 开发工具
- 多种方式的oracle排序
- IE和Firefox下Div背景颜色的问题
- jsp + oracle 排序分页 高效sql语句
- C#命名规则、开发习惯和风格
- HTML系统学习之七 <CSS单位，HTML常用实体，HTML的头部，HTML事件>
- TOMCAT-HOME/webapps/项目名/META-INF/context.xml的注释含有中文,启动报异常
- http 与 https 的区别
- Android: 采用 startActivityForResult 实现多个Activity间不同不同跳转流程
- UC不支持的CSS
- linux进程间通信之 管道，命名管道，协同进程区别
