所有其他浏览器的CSS，但IE

时间：2011-02-20 20:05:44

标签： jquery html css browser layout

我遇到的问题是我有一个简单的浮动布局，其中s3slider插件安装在其中一个内容div中

它在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 for SLIDER 

 #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;}

完整页面代码 

<?php 
include"inc/config.php";
include"inc/classes.php"; 
$page = new Page;
$details = $page->Details('home');

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<!-- Start JS Plugins-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
<script src="plugins/shadesizes.js"></script>
<script type="text/javascript" src="plugins/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 6000
        });
    });
</script>
<!-- END Plugins -->
<!-- Start Stylesheets -->


<link href="styles/nmain.css" rel="stylesheet" type="text/css" />
<link href="styles/table.css" rel="stylesheet" type="text/css" />
<link href="styles/tabs.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="screen">
#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;}
</style>
<!-- END Stylesheets -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wind Blocker Sun Shades - <?php echo ucwords($details['title']);?></title>
</head>
  <body>
<div id="container">

        <?php include"inc/header.php";?>
    <div id="content">

        <!-- START LEFT NAV -->
        <?php include"inc/nav.php";?>
        <!-- END LEFT NAV -->


   <!-- START SLIDE SHOW -->            <div class="smallblock">


<div class="smallblock">
               <?php echo $details['htmlDesc'];?>
            </div>

           <div id="footer">
        Copyright Lilypad Leisure 2011 - <a href="#">Terms of Sale</a> - <a href="#">Sitemap</a>
    </div><!-- END FOOTER -->
    </div><!-- END CONTENT -->
</div><!-- END CONTAINER -->



</body>
</html>

3 个答案:

答案 0 :(得分：2)

将特定于IE的样式放在单独的CSS文件中，然后将该文件包含在HTML中，如下所示：

<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->

这些被称为conditional comments。反过来也可以通过在标记中添加if !IE来实现。

答案 1 :(得分：2)

您可以使用IE conditional comments：

<!--[if !IE]>-->
  <link style="text/css" href="http://path.to/non-ie.css" rel="stylesheet" />
<!--<![endif]-->

答案 2 :(得分：2)

您可以在条件注释中包装您希望IE忽略的任何内容，如下所示：

<!--[if !IE]><!-->
IE will ignore whatever is put here.
<!--<![endif]-->
相关问题
最新问题