IE7中的CSS问题

Question

I have simple web page and that banner contains three images. 我有一个简单的网页，该横幅包含三个图像。 I want to expand the banner when different resolutions.my solution is working on Firefox and Chrome but not IE7. 我想在不同的resolutions.my解决方案在Firefox和Chrome上运行但不能在IE7上扩展横幅。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">

        #left{width:338px; height:103px; float:left; background-image:url('image/banner_left.jpg'); background-repeat:no-repeat; margin:0px; padding:0px;}
        .middle{float:left; background-image:url('image/banner_middle.jpg'); background-repeat:repeat-x; margin:0px; padding:0px; }
        #right{width:620px; height:103px; float:right; background-image:url('image/banner_right.jpg'); background-repeat:no-repeat;margin:0px; padding:0px; }
    </style>
</head>
<body style="margin:0px; padding:0px;">
    <form id="form1" runat="server">        
        <div id="container" class="middle"  style="float:left;">
            <div id="left"></div>
            <div id="middle" class="middle"></div>
            <div id="right"></div>
            <div id="content" style="clear:both; float:left;"></div>
        </div> 
    </form>
</body>
</html>

any idea? 任何想法？

thanks in advance! 提前致谢！

Answer 1

尝试以百分比为单位在.middle中设置width值。

Answer 2

Using your example and assuming you want any content under the banner this is one way you can do it: 使用您的示例并假设您想要横幅下的任何内容，这是您可以做到的一种方法：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body{
            margin:0px;
            padding:0px;
        }
        #banner{
            background:url('image/banner_middle.jpg') ;
            background-repeat:repeat-x;
        }
        #left{
            width:338px;
            height:103px;
            float:left;
            background-image:url('image/banner_left.jpg');
            background-repeat:no-repeat;
        }
        #right{
            width:620px;
            height:103px;
            float:right;
            background-image:url('image/banner_right.jpg');
            background-repeat:no-repeat;
        }
        .clearFloat{
            clear:both;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">        
        <div id="banner">
            <div id="left"></div>
            <div id="right"></div>
            <div class="clearFloat"></div>
        </div>
        <div id="content">
            Any content goes here
        </div>
    </form>
</body>
</html>

IE7中的CSS问题

问题描述

2 个解决方案

解决方案1
0

解决方案2
0 2011-05-11 14:27:07

IE7中的CSS问题

问题描述

2 个解决方案

解决方案1 0

解决方案2 0 2011-05-11 14:27:07

解决方案1
0

解决方案2
0 2011-05-11 14:27:07