Question

我有简单的网页，该横幅包含三张图片。我希望在不同的resolution.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>

任何想法？

提前感谢！

Answer 1

尝试在width中设置.middle百分比值。

Answer 2

使用您的示例并假设您想要横幅下的任何内容，这是您可以这样做的一种方式：

<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 个答案: