所有其他浏览器的CSS，但IE
我遇到的问题是我有一个简单的浮动布局，其中一个内容div安装了s3slider插件
它在Internet Explorer中运行良好，但所有其他浏览器（chrome，ff，opera）的左边距约为40px，上边距约为15px。 我可以弄明白为什么所以我想知道是否有办法添加左：-40px; 顶部：-15px; 只能由IE浏览器阅读。
另一个问题是滑块的宽度宽度小于其在IE中完美匹配的容器。 我还没有找到解决方法。
主要CSS：
@charset "utf-8"; /* CSS Document */ body{ font-size:12px; font-family:Verdana, Geneva, sans-serif; background:#AECF76; padding:0px; margin:0px; } input[type=submit]{ float:right; padding:10px; font-size:14px; background:#595959; border:0px; color:#E4EFD1; font-weight:bold; margin-top:10px; -moz-border-radius:4px; } input[disabled=disabled] { border:0px; background:0px; } input[disabled] { border:0px; background:0px; } .edit { border:1px solid red; background:#FFF; color:#333; font-weight:bold; margin-right:5px; padding:5px; } h1{ font-size:18px; padding:0px; margin:0px; } h2,h3{ font-size:16px; padding:0px; margin:0px; } h4,h5,h6{ font-size:14px; padding:0px; margin:0px; } /* SIZE TABLE */ .cbox{ display:none; }.sizetable input[type=checkbox] { display: none; } /************/ #container{ width:900px; margin:0 auto; /**/ /*left: 50%; top: 50%; margin-left: auto; margin-right: auto;*/ } #header{ width:900px; float:left; -moz-border-radius:4px 4px 0 0; border-radius::4px 4px 0 0; } #header img{ -moz-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0; } #content{ width:900px; float:left; border:1px solid black; background:#fff; } .leftNavContainer{ width:200px; float:left; } .leftNavHeader{ width:180px; font-weight:bold; padding:10px; font-size:14px; background:#595959; color:#E4EFD1; float:left; } .leftNav{ width:200px; float:left; height:auto; } .leftNav ul{ margin:0px; padding:0px;list-style-type:none;} .leftNav li a{ background: #E4EFD1; color: #333; display: block; text-decoration:none; width: 185px; padding:5px; padding-left:10px; } .leftNav li a:hover{ background: #666; color: #E4EFD1; } .smallblock{ width:680px; padding:10px; float:left; position: relative; /*important */ } /* */ .shadebox{ width:160px; padding:10px; float:left; background:#fff; } .shadeboxsml{ width:60px; padding:10px; float:left; background:#fff; } .name{ width:155px; padding-top:10px; float:left; text-align:center; background:#fff; } .shadebox .info{ width:160px; float:left; } .shadebox .left{ width:37px; float:left; } .shadebox .front{ width:74px; float:left; padding:13px 5px 0px 5px; } /* */ .tableHead{ width:835px; float:left; padding:10px;border:1px solid #AECF76; background:#666; color:#E4EFD1; font-weight:bold;border-bottom:0px;margin-top:10px; display:inline;-moz-border-radius:4px 4px 0 0; font-size:14px; } .tableHeadsml{ width:680px; float:left; padding:10px;background:#E4EFD1;color:#7BA235; margin-top:10px; display:inline; } .fullblock{ width:880px; padding:10px; float:left; } #footer{ width:880px; padding:10px; float:left; background:#E4EFD1; -moz-border-radius:0 0 4px 4px; } 滑块的CSS
#slider { width: 680px; /* important to be same as image width */ height: 256px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ float:left; } #sliderContent { width: 680px; /* important to be same as image width or wider */ position: absolute; top: 0; margin-left: 0; float:left; } .sliderImage { float: left; position: relative; display: none; } .sliderImage img{border:0px;} .sliderImage span { position: absolute; font: 12px/15px Arial, Helvetica, sans-serif; padding: 10px 10px; width: 660px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; padding-bottom:14px; } .clear { clear: both; } .sliderImage span strong { font-size: 14px; } .top { top: 0; left: 0; } .bottom { bottom: 0; left: 0; } ul { list-style-type: none;}
完整页面代码
Details('home'); ?> $(document).ready(function() { $('#slider').s3Slider({ timeOut: 6000 }); }); #slider { width: 680px; /* important to be same as image width */ height: 256px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ float:left; } #sliderContent { width: 680px; /* important to be same as image width or wider */ position: absolute; top: 0; margin-left: 0; float:left; } .sliderImage { float: left; position: relative; display: none; } .sliderImage img{border:0px;} .sliderImage span { position: absolute; font: 12px/15px Arial, Helvetica, sans-serif; padding: 10px 10px; width: 660px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; padding-bottom:14px; } .clear { clear: both; } .sliderImage span strong { font-size: 14px; } .top { top: 0; left: 0; } .bottom { bottom: 0; left: 0; } ul { list-style-type: none;} Wind Blocker Sun Shades -
将特定于IE的样式放在单独的CSS文件中，然后将该文件包含在HTML中，如下所示：
这些被称为条件评论 。 反过来也可以通过在标签中添加if !IE来实现。
您可以使用IE条件注释 ：
您可以在条件注释中包装您希望IE忽略的任何内容，如下所示：
IE will ignore whatever is put here.