FlexSlider图像出现在IE和Chrome的不同位置

Question

我的页面上有一些flexslider图像，我似乎无法弄清楚为什么图像显示在IE与Chrome的不同位置。有没有人有任何建议我如何使位置一致，无论浏览器？ Chrome正在显示在正确的位置，IE将图像推到右边....'离我的页面边界。

#main {
   margin-left: 575px; 
   margin-top: 175px;
   margin-right: 0px;
   overflow: hidden;} 

<div id="main" role="main">
  <section class="slider">
    <div id="slider" class="flexslider">
      <ul class="slides">
        <li>
        <img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" alt="AMORE Wooden Sign" />
   </li>
...

<script type="text/javascript">
$(function(){
  SyntaxHighlighter.all();
});
$(window).load(function(){
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: true,
    slideshow: true,
    itemWidth: 100,
    itemMargin: 0,
    asNavFor: '#slider'
  });

  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: true,
    slideshow: true,
    sync: "#carousel",
    start: function(slider){
      $('body').removeClass('loading');
    },
    lightbox: true
  });
});