0

请不要被“只是另一个 IE 问题”吓倒。

我有一个使用 Twitter Bootstrap 构建的自定义布局，除了所有 IE（全部=6-8）之外，所有浏览器中的所有内容都可以正确缩放和缩放。我已经尝试了尽可能多的技巧来获得最大宽度以及在 IE 中工作的所有内容，但主背景图像 (id="bg") 无法在 IE 中缩放。有任何想法吗？

这是代码：

<html lang="en">
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<head>
<meta charset="utf-8">
<title>Alpha Marine Inc.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  .sidebar-nav {
    padding: 9px 0;
  }
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script type="text/javascript">
function MM_changeProp(objId,x,theProp,theValue) { //v9.0
var obj = null; with (document){ if (getElementById)
obj = getElementById(objId); }
if (obj){
if (theValue == true || theValue == false)
  eval("obj.style."+theProp+"="+theValue);
else eval("obj.style."+theProp+"='"+theValue+"'");
}
}
</script>
</head>

<body>

<div class="container-fluid">
<div class="row-fluid">
        <ul class="pull-right" id="nav">
        <li><a href="#" id="home"></a>
        <li><a href="#" id="ourServices"></a>
        <li><a href="#" id="aboutUs"></a>
        <li><a href="#" id="insurance"></a>
        <li><a href="#" id="automobiles"></a>
        <li><a href="#" id="contactUs"></a>
        </ul>
</div>

<div class="row-fluid" id="banner">
    <div class="span12">
            <img id="bg" src="images/homepage.jpg" />
            <a href="#"><img id="logo" src="images/logo.jpg" /></a>
            <a href="#"><img id="splash" src="images/splash.jpg" /></a>
    </div>
</div>

<div class="row-fluid" id="sub">
    <div class="span12">
        <div style="float:right;">
        <div class="span199"><a href=""><img src="images/door2door.jpg" alt="Door to Door" onMouseOver="MM_changeProp('d2d','','backgroundPosition','bottom center','SPAN')" onMouseOut="MM_changeProp('d2d','','backgroundPosition','top center','SPAN')" /><span id="d2d" onMouseOver="MM_changeProp('d2d','','backgroundPosition','bottom center','SPAN')" onMouseOut="MM_changeProp('d2d','','backgroundPosition','top center','SPAN')"></span></a></div>
        <div class="span199"><a href=""><img src="images/door2port.jpg" alt="Door to Port" onMouseOver="MM_changeProp('d2p','','backgroundPosition','bottom center','SPAN')" onMouseOut="MM_changeProp('d2p','','backgroundPosition','top center','SPAN')" /><span id="d2p" onMouseOver="MM_changeProp('d2p','','backgroundPosition','bottom center','SPAN')" onMouseOut="MM_changeProp('d2p','','backgroundPosition','top center','SPAN')"></span></a></div>
        <div class="span199"><a href=""><img src="images/port2door.jpg" alt="Port to Door" onMouseOver="MM_changeProp('p2d','','backgroundPosition','bottom center','SPAN')" onMouseOut="MM_changeProp('p2d','','backgroundPosition','top center','SPAN')" /><span id="p2d" onMouseOver="MM_changeProp('p2d','','backgroundPosition','bottom center','SPAN')" onMouseOut="MM_changeProp('p2d','','backgroundPosition','top center','SPAN')"></span></a></div>
        <div class="span199"><a href=""><img src="images/port2port.jpg" alt="Port to Port" onMouseOver="MM_changeProp('p2p','','backgroundPosition','bottom center','SPAN')" onMouseOut="MM_changeProp('p2p','','backgroundPosition','top center','SPAN')" /><span id="p2p" onMouseOver="MM_changeProp('p2p','','backgroundPosition','bottom center','SPAN')" onMouseOut="MM_changeProp('p2p','','backgroundPosition','top center','SPAN')"></span></a></div>
        </div>
    </div>
</div>

<div class="row-fluid">
    <div class="span8">
    <ul id="foot">
    <li><img src="images/worldwide.jpg" alt="Worldwide" />
    <li><a href="#" id="africa"></a>
    <li><a href="#" id="asia"></a>
    <li><a href="#" id="australia"></a>
    <li><a href="#" id="europe"></a>
    <li><a href="#" id="nAmerica"></a>
    <li><a href="#" id="sAmerica"></a>
    </ul>
    </div>
</div>

<div class="row-fluid footerbox">
    <div class="span3">
    <ul id="subsub">
    <li><a href="#" id="priceQuote"></a>
    <li>|
    <li><a href="#" id="contact"></a>
    </ul>
    </div>
    <div class="span9">
    <ul class="pull-right" id="copy">
    <li><a href="">Terms &amp; Conditions</a> |
    <li>Copyright 2012 &copy; Alpha Marine, Inc. All Rights Reserved.
    </ul>
    </div>
</div>

</div><!-- end .container-fluid -->

</body>

</html>

还有我的 css（我没有编辑任何 bootstrap 的 css）：

/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

/* page headers */
@font-face {
font-family: 'TrajanProBold';
src: url('/fonts/trajanpro-bold-webfont.eot');
src: url('/fonts/trajanpro-bold-webfont.eot?#iefix') format('embedded-opentype'),
     /*url('/fonts/trajanpro-bold-webfont.woff') format('woff'),*/
     url('/fonts/trajanpro-bold-webfont.ttf') format('truetype'),
     url('/fonts/trajanpro-bold-webfont.svg#TrajanProBold') format('svg');
font-weight: normal;
font-style: normal;
}

/* header nav anchors */
@font-face {
font-family: 'MyriadProSemibold';
src: url('/fonts/myriadpro-semibold-webfont.eot');
src: url('/fonts/myriadpro-semibold-webfont.eot?#iefix') format('embedded-opentype'),
     /*url('/fonts/myriadpro-semibold-webfont.woff') format('woff'),*/
     url('/fonts/myriadpro-semibold-webfont.ttf') format('truetype'),
     url('/fonts/myriadpro-semibold-webfont.svg#MyriadProSemibold') format('svg');
font-weight: normal;
font-style: normal;
}



body {
background-color:#eaeaea;
margin:0;
padding:0 33px;
}

#nav, #foot, #subsub, #copy {
list-style:none;
}
#nav {
height:20px;
margin:15px 0;
padding:0;
overflow:hidden;
}
#nav li {
height:20px;
overflow:hidden;
float:left;
margin:0;
padding:0;
}
#nav li a {
display:block;
height:20px;
background-repeat:no-repeat;
}
#nav li a#home {
background-image:url(../images/home.jpg);
background-position:top center;
width:51px;
}
#nav li a#ourServices {
background-image:url(../images/ourServices.jpg);
background-position:top center;
width:105px;
}
#nav li a#aboutUs {
background-image:url(../images/aboutUs.jpg);
background-position:top center;
width:79px;
}
#nav li a#insurance {
background-image:url(../images/insurance.jpg);
background-position:top center;
width:89px;
}
#nav li a#automobiles {
background-image:url(../images/automobiles.jpg);
background-position:top center;
width:110px;
}
#nav li a#contactUs {
background-image:url(../images/contactUs.jpg);
background-position:top center;
width:96px;
}
#nav li a#home:hover, #nav li a#ourServices:hover, #nav li a#aboutUs:hover, #nav li a#insurance:hover, #nav li a#automobiles:hover, #nav li a#contactUs:hover {
background-position:bottom center;
}

ul#nav li a, ul#nav li a:visited {
display: block;
text-decoration: none;
text-transform: uppercase;
font: normal 11pt "Myriad Pro", Arial, Helvetica, sans-serif;
height: 20px;
padding: 0 8px 0 0;
color: #1A3858;
letter-spacing: 0.2px;
}
#nav li a:hover, #nav li a:active {
color:#365D86;
}

#banner {
position:relative;
}
#row1 {
z-index:1111;
}
#row2 {
z-index:5555;
}
#row3 {
z-index:5555;
}
#banner {
height: auto;
overflow: hidden;
max-height: 90%;
}
#banner #bg {
width: expression( document.body.clientWidth < 907 ? "906px" : "auto" ); /* set min-width for IE */
height: expression( this.scrollHeight < 426 ? "425px" : "auto" ); /* sets min-height for IE */
min-height: 425px;
min-width: 906px;
}
#banner #splash {
position:absolute;
padding:0;
width:672px;
min-width: 672px;
max-width: 672px;
height:164px;
min-height: 164px;
max-height: 164px;
overflow:hidden;
bottom:35px;
right:25px;
}
#banner #logo {
display:block;
width:180px;
height:118px;
clear:both;
padding:0;
position:absolute;
top:25px;
left:35px;
text-decoration:none;
}
#banner #logo:hover {
text-decoration:none;
cursor:pointer;
}
#banner #logotext {
z-index:4444;
font-family:"Times New Roman", Times, serif;
color:#FFF;
}
#banner #logotext #first {
font-size:35px;
border-top: 2px solid #ffffff;
border-right: 2px none #ffffff;
border-bottom: 2px none #ffffff;
border-left: 2px none #ffffff;
padding:5px 0 0 0;
}
#banner #logotext #second{
font-size:20px;
border-top: 2px none #ffffff;
border-right: 2px none #ffffff;
border-bottom: 2px solid #ffffff;
border-left: 2px none #ffffff;
padding:0 0 5px 0;
}
#banner #logotext #first, #banner #logotext #second {
display:block;
text-transform:uppercase;
text-emphasis:none;
text-decoration:none;
font-style: normal;
font-variant: normal;
line-height:102%;
}

#sub {
padding:10px 0 10px 0;
min-width:419px;
}
#sub .span199 {
float: left;
width: 199px;
min-width: 199px;
max-width: 199px;
margin-left: 10px;
padding:0 0 3px 0;
border-top: 3px none #CED4DA;
border-right: 3px none #CED4DA;
border-bottom: 3px solid #CED4DA;
border-left: 3px none #CED4DA;
}
#sub div a img {
display:block;
margin:0 0 3px 0;
padding:1px 0 1px 0;
border-top: 4px solid #1a3858;
border-right: 4px none #1a3858;
border-bottom: 3px solid #CED4DA;
border-left: 4px none #1a3858;
}
#sub div span{
display:block;
height:19px;
width:97px;
}
#sub div span#d2d {
background-image:url(../images/d2d.jpg);
background-position:top center;
}
#sub div span#p2d {
background-image:url(../images/p2d.jpg);
background-position:top center;
}
#sub div span#d2p {
background-image:url(../images/d2p.jpg);
background-position:top center;
}
#sub div span#p2p {
background-image:url(../images/p2p.jpg);
background-position:top center;
}
#sub .span199 span#d2d:hover, #sub .span199 span#p2d:hover, #sub .span199 span#d2p:hover, #sub .span199 span#p2p:hover {
background-position:bottom;
}
#sub div a:link, #sub div a:visited {
color: #1A3858;
text-decoration: none;
padding: 5px 0;
font: bold 10pt/150% "Myriad Pro", Arial, sans-serif;
width: 100%;
}
#sub div a:hover, #sub div a:active {
color:#728DAA;
}

#foot {
margin: 0;
padding: 0;
display: block;
}
#foot li {
font-family: Arial, Myriad Pro, sans-serif;
color: #3f4c56;
padding: 0;
float: left;
font-size: 9pt;
text-decoration: none;
}
#foot li a {
display:block;
height:19px;
background-repeat:no-repeat;
}

#foot li a#africa {
width:45px;
background-image:url(../images/africa.jpg);
background-position:top center;
}
#foot li a#asia {
width:35px;
background-image:url(../images/asia.jpg);
background-position:top center;
}
#foot li a#australia {
width:73px;
background-image:url(../images/australia.jpg);
background-position:top center;
}
#foot li a#europe {
width:54px;
background-image:url(../images/europe.jpg);
background-position:top center;
}
#foot li a#nAmerica {
width:103px;
background-image:url(../images/nAmerica.jpg);
background-position:top center;
}
#foot li a#sAmerica {
width:103px;
background-image:url(../images/sAmerica.jpg);
background-position:top center;
}
#foot li a#africa:hover, #foot li a#asia:hover, #foot li a#australia:hover, #foot li a#europe:hover, #foot li a#nAmerica:hover, #foot li a#sAmerica:hover {
background-position:bottom center;
}
#foot li a, #foot li a:visited {
color: #3f4c56;
padding: 0 10px 0 0;
float: left;
text-decoration: none;
font: normal 9pt/36px Arial, "Myriad Pro", sans-serif;
}
#foot li a:hover, #foot li a:active {
color:#5D7282;
}

.footerbox {
border-top: 4px solid #CED4DA;
padding: 8px 0 0 0;
margin: 5px 0 0 0;
}
#subsub, #copy {
margin:0;
padding:0;
}
#subsub li, #copy li {
float:left;
margin:0 5px 0 0;
}
#subsub {
font-family:Arial, Arial, Helvetica, sans-serif;
font-size:9pt;
font-weight: normal;
color:#3f4c56;
line-height:30px;
}
#subsub li a {
display:block;
height:19px;
}
#subsub li a#priceQuote {
background-image:url(../images/priceQuote.jpg);
background-position:top center;
width:83px;
}
#subsub li a#contact {
background-image:url(../images/contact.jpg);
background-position:top center;
width:63px;
}
#subsub li a#priceQuote:hover, #subsub li a#contact:hover {
background-position:bottom center;
}
#subsub a, #subsub a:visited {
font-family:Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
color: #3f4c56;
line-height: 30px;
}
#subsub a:hover, #subsub a:active {
color:#5D7282;
text-decoration: none;
}

#copy li, #copy a, #copy a:visited {
font-family:Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #000;
line-height: 30px;
}
#copy a:hover, #copy a:active {
color:#5D7282;
text-decoration: none;
}


/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {

body {

}

}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*  .logo {
    background: url(logo2x.jpg) no-repeat;
    background-size: 212px 303px;
}*/

}
4

1 回答 1

4

Internet Explorer 8 及更低版本不支持媒体查询，因此您无法为它们进行开箱即用的响应式设计。但是，您可以使用 javascript polyfill 来启用它们。在这里你有几个：

希望能帮助到你！

于 2012-05-23T18:49:37.700 回答