Ie6和IE7 css样式 ul display:inline 的重要性！

今天在布局一个网页的时候，出现以下情况！

 

先看代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<!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>
    <style type="text/css">
        .contain{float:left; width:280px; background:url(images/i_06.gif) no-repeat #0397d5; padding-top:51px;}
        .contain img{float:left;}
        .contain{}
        
        ul,li,form,body,div{padding:0; margin:0;}
        .contain ul{background:#8bd6f6; display:inline; float:left; width:271px; _width:271px; margin-left:3px; _margin-left:2px;}
       .contain li{background:#f00; float:left; margin-left:20px; font-size:14px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="contain">
            
            <ul>
                <li>helo</li>
            </ul>
            <img src="http://images.cnblogs.com/left_09.gif" />
        </div>
    </div>
    </form>
</body>
</html>

 

 

很简单的HTML代码，css样式也在里面然后再看ie7和ie6下的截图！

IE7

IE6

比较会发现，在ie6下的左边出现凹进入的情况，我调整1px的时候，又会凸出来，所以，这个凹进去的大概就是半个像素的样子 ，没办法调整，这个时候，记得，以前看到过的display:inline; 这个css样式属性起到至关重要的作用！

调整过后的css样式如下！

 .contain{float:left; width:280px; background:url(images/i_06.gif) no-repeat #0397d5; padding-top:51px;}
        .contain img{float:left;}
        .contain{}
        
        ul,li,form,body,div{padding:0; margin:0;}
        .contain ul{background:#8bd6f6; display:inline; float:left; width:271px; _width:271px; margin-left:3px;}
       .contain li{background:#f00; float:left; margin-left:20px; font-size:14px;}

 

 

在IE6下OK！

这个属性貌似对ul尤其有效！

 

posted @ 2010-11-12 14:34  neve  阅读(3572)  评论(0)  编辑  收藏  举报