如何强制IE在浏览器窗口左边保留一些边距?

时间:2014-11-01 15:11:32

标签: javascript html css internet-explorer

我的网站已正确居中并安装在除Internet Explorer之外的所有浏览器窗口中。 在IE中发生的是它从左侧移除边距并强制左侧对齐,我不想要的。如何解决此问题,以便IE可以像其他浏览器一样显示我的网站?

如果您愿意,可以查看实时视图here,但我要粘贴代码。

:HTML:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>7Seas Redovisning</title>
<link rel="stylesheet" href="style.css">

</head>



<body>

<div id="big_wrapper">

<header id="top_header">
<h1><img src="img_akin/7seas.jpeg" id="logo" alt=""/>7Seas Redovisning</h1>
<p><b>

<span class="mob_tele">Mob: 076-9516926 <br />
Tel: 040-133403</span><br />
info@7seasredovisning.se</b>

</p>

</header>

<nav id="top_menu">
<ul>
<li>Intresseanmälan</li>
<li>Öppettider</li>

</ul>

</nav>
<div id="new_div"> <!--only the main content-->
<section id="main_section">
<marquee behavior="alternate">We are coming soon, please check back later.</marquee>

<img src="img_akin/image_1st_body.jpg" id="img1" width="650" height="340" alt=""/>

<ol>
<li>LÖPANDE BÖKFÖRING</li><br />
<li>BOKSLUT & ÅRSREDOVISNING</li><br />
<li>SKATTEDEKLARATION</li><br />
<li>LÖNEADMINISTRATION</li><br />
<li>FAKTURERING</li><br />
<li>INKOMSTDEKLARATION</li><br />
<li>MOMSDEKLARATION</li><br />
<li>BOLAGSBILDNING</li><br />
<li>EKONOMI KONSLUT</li><br />

</ol>


</section>


</div>

<footer id="the_footer">
<ul>
<li>
© 7 seas Redovisning <br />                                         

En del av 7seas Money Transfer KB<br />                 
F-skatt registrerat  <br />                                         
Org, Nr: 969756-4079 <br />   
SEB Företagskonto: 5502-1030132<br />
BG: 102-5006

</li>



<li>
Besökadress: Skomakarebyn 8E<br /> 
218 41 Bunkeflostrand<br /> 
Malmö, Sweden <br />  
Follow us on FB <!-- SMARTADDON BEGIN -->
<br />
<script type="text/javascript">
(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>


<a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('www.7seasredovisning.se','bookmarks')"><img alt="Share" src="http://s1.smartaddon.com/s8.png" border="0" /></a>

                        <br /><i>Design & Development: DH BANGLADESH in SWEDEN</i>

</li>


<li>
Tel: 040-133403<br />
Mob: 076-9516926<br />
e-Mail: info@7seasredovisning.se<br/>
www.7seasredovisning.se<br/>
<span id="webstat">
<script src="http://stats.webstat.se/assets/stat_isp2.php"></script> 
<script type="text/javascript">
<!--
document.write("<" + "script src=\"http://stats.webstat.se/statCounter.asp?id=38356&size=" + screen.width + "x" + screen.height + "&depth=" + screen.colorDepth + "&referer=" + escape(document.referrer) + "&isp=" + info2+ "\"></" + "script>"); 
-->
</script>
</span>
<!-- Slut WEBSTAT.SE kod -->

</li>

</ul>


</footer>

</div>

</body>


</html>

.CSS:

    *{
margin:0px;
padding:0px;
}
#top_header h1 {

font:bold 40px Prisoner SF;
margin-top:-20px;
color:#006400;


}
#top_header p {

margin-top:-100px;

color:#A0522D;
float:right;
font-family:Euphemia;
}

.mob_tele{
font-size:12.5px;
}

h2{

font:bold 14px Tahoma;
}
header,section,footer,aside,nav,article,hgroup{
display:block;

}
body{
width:100%;
display:-webkit-box;
display:-o-box;
display:-moz-box;
display:-ms-box;
box-pack:center;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-pack:center;
-ms-box-pack:center;
-o-box-pack:center;
background-color:#E6E6FA;


}


#big_wrapper{
max-width:1200px;
margin-top:20px;


display:-webkit-box;
display:-o-box;
display:-moz-box;
display:-ms-box;
box-orient:vertical;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-ms-box-orient:vertical;
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
background-color:white;


}
#top_header{

border:3px soild gray;
padding:20px;

}
#logo{
padding-top:20px;

}

#top_menu{
border: 2px solid #20B2AA;
border-radius:4px;
background:linear-gradient(to bottom, #87CEEB, #C0C0C0, #87CEEB);
background:-webkit-linear-gradient(to bottom, #87CEEB, #C0C0C0, #87CEEB);
background:-moz-linear-gradient(to bottom, #87CEEB, #C0C0C0, #87CEEB);
background:-ms-linear-gradient(to bottom, #87CEEB, #C0C0C0, #87CEEB);
background:-o-linear-gradient(to bottom, #87CEEB, #C0C0C0, #87CEEB);



/*background:#8FBC8F;*/
color:black;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:7px;
font:bold 18px Euphemia;
float:right;
margin-right:50px;

}



#new_div{
display:block;
display:-moz-box;
display:-o-box;
display:-ms-box;
box-orient:horizontal;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;

}

#main_section{
/*
border: 1px solid blue;
*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-o-box-flex: 1;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;


/*
float: left;

width: calc(75% - 82px);
*/

}
#main_section li{
margin-left:255px;
font-family:Euphemia;
background-image:url(img/backgrounds.jpg) no-repeat;
font-weight:bold;

}
#main_section marquee{

font-family:Segoe Print;
font-size:40px;
font-weight:bold;
margin-bottom:40px;
color:#B22222;

}




#img1{
float:right;
}


#the_footer{
/*
text-align:center;
*/
background:#F0F8FF;
/*
padding:20px;
*/
border-top:2px solid green;
}
#the_footer li{
list-style:none;
display:inline-block;
padding:40px;
margin-left:35px;
font-family:Euphemia;
font-size:13px;

}

1 个答案:

答案 0 :(得分:1)

而不是-ms-box,试试这个:

body {
   display:-ms-flexbox;
   -ms-flex-pack:center;
   -ms-flex-align:center;
}

适用于IE10 +。