读书人

CSS样式IE6/7和IE8/9的效果不一致解

发布时间: 2012-02-23 22:01:34 作者: rapoo

CSS样式,IE6/7和IE8/9的效果不一致
在“IE6/7”浏览器下,两个表格拼接不起来,中间留了一点缝隙。效果如下:


而在“IE8/9”浏览器下,却没有任何问题,没有缝隙,效果如下:


备注:HTML代码中,是一个大表格,分为上、中、下三行。然后,每一行中分别嵌入一个表格,对应着首页的头部,中部和脚部。现在头部的表格和中间的表格流出了缝隙,在IE6/7下。
现在表格的属性设置,都有“cellpadding="0" cellspacing="0" border="0" style="border-style:none;"”

问题:这是怎么回事???记得自己曾经遇到过这样的情况,IE6有什么属性好像默认是20像素,是这样原因吗,叫什么呢??? 怎样解决呢???

全部HTML代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>

<!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 runat="server">
<title>鲍店煤矿—人力资源科</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<center>
<%--主表格--%>
<table cellpadding="0" cellspacing="0" border="0" style="border-style:none;">
<tr>
<td valign="top">

<%--头部表格--%>
<table style="width:1004px; height:242px; margin:0px; border-style:none;" cellpadding="0" cellspacing="0" border="0" >
<tr><td>
<img src="Pic/defualt_01.gif" usemap="#top" style=" border-width:0px; border-style:none;" />
</td></tr>
</table>
</td>
</tr>


<tr>
<td valign="top">
<%--主体表格--%>
<table width="1004" cellpadding="0" cellspacing="0" border="0" style="margin:0px; border-style:none;" >
<tr><td width="36" style=" background-image:url(Pic/defualt_02.jpg)"></td>
<td width="201" align="center" valign="top">
<%--主体表格内嵌表格--%>
<table width="201" cellpadding="0" cellspacing="0" border="0" style="border-style:none;">
<%--用户登录--%>
<tr>
<td>
<table width="100%" height="133" background="Pic/defualt_04.gif" cellpadding="0" cellspacing="0" border="0" style="border-style:none;">
<tr><td align="center" valign="middle">
<table width="90%" height="80" border="0" cellpadding="0" cellspacing="0" style="border-style:none;">
<tr>
<td width="30%"></td><td width="70%"></td>
</tr>
<tr>
<td width="30%"></td><td width="70%"></td>
</tr>
<tr>
<td width="30%"></td><td width="70%"></td>
</tr>
</table>
</td></tr>
</table>
</td>
</tr>
<%--公告--%>
<tr>
<td></td>
</tr>
<%--天气预报--%>
<tr>
<td></td>


</tr>
<%--信息查询--%>
<tr>
<td></td>
</tr>
<%--便民服务--%>
<tr>
<td></td>
</tr>
<%--友情链接--%>
<tr>
<td></td>
</tr>
</table>
</td><td width="734"></td>
<td width="33" style=" background-image:url(Pic/defualt_05.jpg)"></td></tr>
</table>
</td>
</tr>


<tr>
<td>
<%--底部表格--%> </td>
</tr>
</table>
</center>
</div>
<map name="top" id="top">
<area shape="RECT" coords="241, 70, 311, 99" href="index.aspx">
<area shape="RECT" coords="474, 73, 564, 100" href="information_new.aspx">
<area shape="RECT" coords="739, 73, 809, 101" href="ShowMBoard.aspx">
<area shape="RECT" coords="346, 71, 436, 99" href="ksjj.html">
<area shape="RECT" coords="601, 73, 690, 100" href="source/VideoCategory.aspx">
<area shape="RECT" coords="856, 73, 945, 100" href="index1.aspx">
<area shape="RECT" coords="816, 20, 877, 44" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://10.94.6.1');" href="#">
<area shape="RECT" coords="889, 20, 948, 44" href="javascript:window.external.AddFavorite('http://10.94.6.1/','人力资源管理科网站')">
</map>
</form>
</body>
</html>


[解决办法]
页面css兼容问题,建议转帖到web开发板块去问。
[解决办法]
表格的 样式 不容易控制 ,拖一下就变形 为什么 不用 div+CSS 来实现呢
[解决办法]
又见浏览器兼容真的很头疼
[解决办法]
用IETest或者火狐看一下呗兼容性的问题
[解决办法]
对上面那张图片的父元素添加 overflow:hidden;的样式试试
[解决办法]
样式表里加个

img{display:block;}
[解决办法]
代码贴得好长啊……呵呵……
[解决办法]

探讨

引用:

样式表里加个

img{display:block;}


究竟是什么把它撑大的呢???
用“display:block”将区块转化为内联块。或者<Img>标签和</td></tr>放在一行显示都可以解决留有缝隙的问题,这到底是怎么回事呢???

读书人网 >CSS

热点推荐