CSS的所有其他浏览器，但IE浏览器 [英] css for all other browsers but IE

查看：143 发布时间：2016/8/15 15:17:24 jquery html css browser layout

本文介绍了CSS的所有其他浏览器，但IE浏览器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到的问题是我有内容的div之一内安装了s3slider插件简单的浮布局

它工作在Internet Explorer不错，但其他所有浏览器（铬，FF，歌剧）对40像素的左边缘和大约15像素的上边距。我可以找出原因，所以我在想，如果有加左道：-40px;顶部：-15px;只有通过所有浏览器IE，但可以读取。

的另一个问题是，在滑块的宽度在宽度小，它的容器，其在IE完美匹配。我仍然还没有想出了一个修复这一点。

主要CSS：

  @charsetUTF-8;
/ * CSS文件* /
身体{
    字体大小：12像素;
    FONT-FAMILY：宋体，日内瓦，无衬线;
    背景：＃AECF76;
    填充：0像素;
    保证金：0像素;
}
输入[类型=提交] {
浮动：权利;
填充：10px的;
字体大小：14px的;
背景：＃595959;
边框：0像素;颜色：＃E4EFD1;
字体重量：大胆的;
的margin-top：10px的;
-moz-边界半径：4PX;
}输入[禁用=禁用] {
边框：0像素;
背景：0像素;
}
输入[禁用] {
边框：0像素;
背景：0像素;
}
.edit {
边框：1px的固体红色;
背景：#FFF;
颜色：＃333;
字体重量：大胆的;
保证金右：5像素;
填充：5像素;
}
H1 {
字体大小：18像素;
填充：0像素;
保证金：0像素;
}
H2，H3 {
字体大小：16像素;
填充：0像素;
保证金：0像素;
}
H4，H5，H6 {
字体大小：14px的;
填充：0像素;
保证金：0像素;
}
/ *大小表* /
.cbox {
 显示：无;
} .sizetable输入[类型=复选框] {
    显示：无;
}
/ ************ /
＃容器{
宽度：900px;
保证金：0汽车; / ** /
/ *左：50％;
顶部：50％;
保证金左：自动;
  保证金右：自动; * /
}{的#header
宽度：900px;
浮动：左;
-moz-边界半径：4PX递四方0 0;
边界半径:: 4PX递四方0 0;
}
IMG的#header {-moz-边界半径：4PX递四方0 0;
边界半径：4PX递四方0 0;
}
＃内容{
宽度：900px;
浮动：左;
边框：1px的纯黑色;
背景：#FFF;
}
.leftNavContainer {
 宽度：200像素; 浮动：左;
}
.leftNavHeader {
 宽度：180像素;
 字体重量：大胆的;
 填充：10px的;
 字体大小：14px的;
背景：＃595959;
颜色：＃E4EFD1;
 浮动：左;
 }
.leftNav {
 宽度：200像素;
 浮动：左;
 身高：汽车;
 } .leftNav UL {
保证金：0像素;填充：0像素;列表样式类型：无;}.leftNav李一{
背景：＃E4EFD1;
   颜色：＃333;
   显示：块;
   文字修饰：无;
   宽度：185px;
   填充：5像素;
   填充左：10px的;
}
.leftNav李一：悬停{
背景：＃666;
   颜色：＃E4EFD1;
}.smallblock {
宽度：为680像素;
填充：10px的;
浮动：左;位置：相对; / *重要* /
}
/ * * /
.shadebox {
宽度：160像素;
填充：10px的;
浮动：左;
背景：#FFF;
}
.shadeboxsml {
宽度：60像素;
填充：10px的;
浮动：左;
背景：#FFF;
}
。名称{
宽度：155px;
填充顶：10px的;
浮动：左;
文本对齐：中心;
背景：#FFF;
}
.shadebox .INFO {
宽度：160像素;
浮动：左;}
.shadebox。左{
宽度：37px;
浮动：左;}
.shadebox .front {
宽度：74px;
浮动：左;
填充：13px的为5px 0像素为5px;}/ * * /
.tableHead {
宽度：835px;
浮动：左;填充：10px的;边界：1px的固体＃AECF76;背景：＃666;颜色：＃E4EFD1;字体重量：大胆;边框底部：0像素;的margin-top：10px的;显示：内联; -moz-边界半径：4PX递四方0 0;字体大小：14px的;
}
.tableHeadsml {
宽度：为680像素;
浮动：左;填充：10px的;背景：＃E4EFD1;颜色：＃7BA235;的margin-top：10px的;显示：内联;
}
.fullblock {
宽度：880px;
填充：10px的;
浮动：左;
}
#footer {
宽度：880px;
填充：10px的;
浮动：左;
背景：＃E4EFD1;
-moz-边界半径：0 0 4PX 4PX;
}

CSS对于滑

  #slider {
    宽度：为680像素;以相同的图像宽度/ *重要* /
    高度：256PX;是一样的图像高度/ *重要* /
    位置：相对; / *重要* /
    溢出：隐藏; / *重要* /
    浮动：左;}#sliderContent {
    宽度：为680像素;以相同的图像宽度或更宽/ *重要* /
    位置：绝对的;
    顶部：0;
    保证金左：0;
    浮动：左;
}
.sliderImage {
    浮动：左;
    位置：相对;
    显示：无;}
.sliderImage IMG {边界：0像素;}
.sliderImage跨度{
    位置：绝对的;
    字体：12像素/ 15px的宋体，黑体，无衬线;
    填充：10px的10px的;
    宽度：660px;
    背景颜色：＃000;
    过滤器：α（不透明= 70）;
    -moz-不透明：0.7;
    -khtml不透明度：0.7;
    不透明度：0.7;
    颜色：#FFF;
    显示：无;
    填充底：14px的;
}
.clear {
    明确：两者;
}
.sliderImage跨度强{
    字体大小：14px的;
}
。最佳 {
    顶部：0;
    左：0;
}
.bottom {
    底部：0;
    左：0;
}UL {列表样式类型：无;}

整版code

 ＆LT; PHP
包括INC / config.php文件;
包括INC / classes.php
$页=新的一页;
$细节= $页面级＆GT;详细信息（'家'）;？＆GT;
！＆LT; DOCTYPE HTML PUBLIC -  // W3C // DTD XHTML 1.0过渡// ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;＆LT; HEAD＆GT;
＆LT;！ - 开始JS插件 - ＆GT;
＆所述; SCRIPT SRC =http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =插件/ shadesizes.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =插件/ s3Slider.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
    $（文件）。就绪（函数（）{
        $（'＃滑盖）。s3Slider（{
            超时：6000
        }）;
    }）;
＆LT; / SCRIPT＆GT;
＆LT;！ -  END插件 - ＆GT;
＆LT;！ - 开始样式表 - ＆GT;
＆LT;链接HREF =风格/ nmain.css的rel =stylesheet属性类型=文/ CSS/＆GT;
＆LT;链接HREF =风格/ table.css的rel =stylesheet属性类型=文/ CSS/＆GT;
＆LT;链接HREF =风格/ tabs.css的rel =stylesheet属性类型=文/ CSS/＆GT;
＆LT;风格类型=文/ CSS媒体=屏幕＆GT;
#slider {
    宽度：为680像素;以相同的图像宽度/ *重要* /
    高度：256PX;是一样的图像高度/ *重要* /
    位置：相对; / *重要* /
    溢出：隐藏; / *重要* /
    浮动：左;}#sliderContent {
    宽度：为680像素;以相同的图像宽度或更宽/ *重要* /
    位置：绝对的;
    顶部：0;
    保证金左：0;
    浮动：左;
}
.sliderImage {
    浮动：左;
    位置：相对;
    显示：无;}
.sliderImage IMG {边界：0像素;}
.sliderImage跨度{
    位置：绝对的;
    字体：12像素/ 15px的宋体，黑体，无衬线;
    填充：10px的10px的;
    宽度：660px;
    背景颜色：＃000;
    过滤器：α（不透明= 70）;
    -moz-不透明：0.7;
    -khtml不透明度：0.7;
    不透明度：0.7;
    颜色：#FFF;
    显示：无;
    填充底：14px的;
}
.clear {
    明确：两者;
}
.sliderImage跨度强{
    字体大小：14px的;
}
。最佳 {
    顶部：0;
    左：0;
}
.bottom {
    底部：0;
    左：0;
}UL {列表样式类型：无;}
＆LT; /风格＆GT;
＆LT;！ -  END样式表 - ＆GT;
＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8/＆GT;
＆LT;标题＆GT;风阻滞剂遮阳帘 - ＆LT; PHP回声ucwords（$细节['标题']）;＆GT;＆LT; /标题＆GT;？
＆LT; /头＆GT;
  ＆LT;身体GT;
＆LT; DIV ID =容器＆GT;        ＆LT; PHP的包括INC / header.php文件;？＆GT;
    ＆LT; DIV ID =内容＆GT;        ＆LT;！ -  START左侧导航栏 - ＆GT;
        ＆LT; PHP的包括INC / nav.php;？＆GT;
        ＆LT;！ -  END左侧导航栏 - ＆GT;
   ＆LT;！ - 开始放映幻灯片 - ＆GT; ＆LT; DIV CLASS =smallblock＆GT;
＆LT; DIV CLASS =smallblock＆GT;
               ＆LT;？PHP的echo $细节['htmlDesc'];？＆GT;
            ＆LT; / DIV＆GT;           ＆LT; DIV ID =页脚＆GT;
        版权所有利利帕德休闲2011  - ＆LT; A HREF =＃＆GT;销售条款＆LT的; / A＆GT; - ＆所述; A HREF =＃＆GT;网站地图与所述; / A＆GT;
    ＆LT; / DIV＆GT;＆LT;！ -  END页脚 - ＆GT;
    ＆LT; / DIV＆GT;＆LT;！ -  END内容 - ＆GT;
＆LT; / DIV＆GT;＆LT;！ -  END容器 - ＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;

解决方案

把你的IE特有的风格在一个单独的CSS文件，然后包含这个文件在你的HTML像这样：

 ＆LT;！ -  [如果IE＆GT;＆LT;链接rel =stylesheet属性类型=文/ CSS的href =ie.css/＆GT;＆LT; ！[ENDIF]  -  GT;

这些被称为有条件的评论。这样做的逆向工程也通过把如果！IE 的标签来代替。

The problem i am having is I have a simple floated layout with the s3slider plugin installed within one of the content divs

It works fine in internet explorer but all other browsers (chrome, ff, opera) have a left-margin of about 40px and a top margin of about 15px. I can figure out why so i was wondering if there was a way to add left:-40px; top:-15px; to only be read by all browsers but IE.

The other problem is that the width of the slider is smaller in width that its container which matches perfectly in IE. I still havent figured out a fix for this.

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

FULL PAGE CODE

<?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>

解决方案

Put your IE-specific styles in a separate CSS file and then include that file in your HTML like so:

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

These are called conditional comments. The reverse of this also works by putting if !IE in the tag instead.

这篇关于CSS的所有其他浏览器，但IE浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

CSS的所有其他浏览器，但IE浏览器 [英] css for all other browsers but IE

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

CSS的所有其他浏览器，但IE浏览器 [英] css for all other browsers but IE

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭