1）

Question

我正在尝试针对IE和Firefox定位特定的CSS样式。根据我所读到的内容，我可以执行以下所有IE目标：

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

但是，它似乎不适合我。

此外，他们是一种调用样式的方式，它只针对IE吗？例如，假设我有以下代码：

<span class="title">WHAT YOU NEED TO KNOW</span><br />
    <span class="styletext">Tuesday October 24, 2014</span>

我想添加以下css，只有当网站在IE上时它才会起作用：

<span class="title random(only for IE/Firefox)">WHAT YOU NEED TO KNOW<br />
                <span class="styletext">Tuesday October 24, 2014 </span></span>

他们是否有办法实现这一目标？

由于

更新

以下是我用来创建网站的cfm文件。目前，它没有响应，但在此过程中很快就会这样做：

HTML：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link rel="stylesheet" href="css/regalmedstyle.css" type="text/css" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap_override.css" type="text/css" />
    <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
    <![endif]-->
    </head>
<body onUnload="closePopUpWindow()">
        <cfinclude template="header.cfm">

        <cfinclude template="sbar_left.cfm">
            <!---Body of Page--->
            <div id="mainl">
                    <img src="img/blah.jpg" class="sideImg" />
                    <img src="img/blah2.jpg" class="sideImg" />
                    <img src="img/blah3" class="sideImg" />
                    <img src="img/bah4" class="sideImg" />
            </div>
        <div id="mainr">
                <span class="title">WHAT YOU NEED TO KNOW<br />
                <span class="styletext">Tuesday October 24, 2014 </span></span>
                <br />
                <span class="sizetext">Susam facest, et fugit fugit doluptas simagnit opta pro qui ommodit laut magnis nis aborempor sin pro offictem qui consero blatis vellace stiore verae conseri optat.</span><br />
                <div class="spacingP">
                    <p class="sizetext">Ri dignati ut que sitatureped ut fugia ilia ne nobit, oditas erbis. Nos, unius in iam quod ducit grae orum se. </p>
                </div>
                <br />
                    <span class="title">WHAT YOU NEED TO KNOW <br />
                    <span class="styletext">Tuesday October 24, 2014 </span></span>
                    <br />
                    <span class="sizetext">Susam facest, et fugit fugit doluptas simagnit opta pro qui ommodit laut magnis nis aborempor sin pro offictem qui consero blatis vellace stiore verae conseri optat.</span><br />
                    <div class="spacingP">
                        <p class="sizetext">Ri dignati ut que sitatureped ut fugia ilia ne nobit, oditas erbis. Nos, unius in iam quod ducit grae orum se. </p>
                    </div>
                    <br />
                    <span class="title">WHAT YOU NEED TO KNOW<br />
                    <span class="styletext">Tuesday October 24, 2014 </span></span>
                    <br />
                    <span class="sizetext">Susam facest, et fugit fugit doluptas simagnit opta pro qui ommodit laut magnis nis aborempor sin pro offictem qui consero blatis vellace stiore verae conseri optat.</span><br />
                    <div class="spacingP">
                        <p class="sizetext">Ri dignati ut que sitatureped ut fugia ilia ne nobit, oditas erbis. Nos, unius in iam quod ducit grae orum se. </p>
                    </div>
                    <br />
                    <span class="title">WHAT YOU NEED TO KNOW<br />
                    <span class="styletext">Tuesday October 24, 2014 </span></span>
                    <br />
                    <span class="sizetext">Susam facest, et fugit fugit doluptas simagnit opta pro qui ommodit laut magnis nis aborempor sin pro offictem qui consero blatis vellace stiore verae conseri optat.</span><br />
                    <div class="spacingP">
                        <p class="sizetext">Ri dignati ut que sitatureped ut fugia ilia ne nobit, oditas erbis. Nos, unius in iam quod ducit grae orum se. </p>
                    </div>
                    <br />
        </div>
        <cfinclude template="sbar_right.cfm">   
</body>
<!---   <cfinclude template="footer.cfm">--->  
</html>

以下是css文件。我道歉它有多乱。今天刚刚开始清理它：

CSS：

html, body { font-family: "OpenSans", sans-serif; }

body{
    position:relative;
    background-color:white;
    margin: 0;
    padding: 0;
}

p{
    font-size:10pt !important;
    display:inline;
}

.spacingP{
    margin-top: 6px;
}

a{
color:white;
}

ul{
list-style:none;
}

.linkFont{
    font-family:TradeGothic CondEighteen !important;
}

.img-banner{
    margin-left:auto;
    margin-right:auto;
    display:block;
}

#wrapper{
    width: 940px;
    margin: 0 auto;
    color:grey;
 }

#banner-wrapper{
    display:block;
    padding:0;
    margin-left:auto;
    margin-right:auto;
    background:#FFF;
    background-image: url("../img/Banner.jpg");
    background-repeat: no-repeat;
    padding-bottom:83px;
}

.navbar-buttons{
    padding-top:20px;
    padding-right:20px;
    text-align:right;
    list-style:none;
    margin:0 auto;
    overflow:hidden;
}

#mainl{
    float:left;
    padding:1px 0 0 0;
    width:10%;
    margin-right:30px;
    margin-top:15px;
    margin-left:20px;
}

#mainr{
    float:left;
    padding:1px 0 0 0;
    margin: 20px 0 0 45px;
    width:30%;
}

img.sideImg{
    float:left;
    margin: 10px 0 15px 7px;    
}

#sidebarleft{
    float: left;
    width: 15%;
    padding: 0; margin:0;
    margin: 10px 0px 0px 0px;
}

#sidebarleft a:hover{
    color:green;
}

#sidebarleft ul{
    list-style:none;
    padding:0;
    margin:10px 0 10px 0;
}

.leftbuttons{
    background-image: url("../img/Button_1.jpg");
    background-repeat:no-repeat;
    padding: 5px 0 8px 10px;
}

.leftbuttons a{
    color:grey; 
    font-size:10pt !important;
}

.leftbuttons2{
    background-image: url("../img/Button_2.jpg");
    background-repeat:no-repeat;
    padding: 7px 0 4px 7px;
}

.leftbuttons2 a{
    color:grey;
    vertical-align:center;
    font-size: 10pt !important;
}

#sidebarright{
    float: right;
    width: 30%;
    padding: 0; margin:0;
    margin-top:15px;
}

#sidebarright a{
    color:grey;
    font-size:10pt !important;
}

#sidebarright a:hover{
    color:green;
}

.rightbuttons{
    background-image: url("../img/Button.jpg");
    background-repeat:no-repeat;
    padding:  14px 0 20px 11px;
    text-decoration:none;
    margin-left:30px;
}
.rightbuttons2{
    background-image: url("../img/Button.jpg");
    background-repeat:no-repeat;
    padding:  9px 0 19px 11px;
}

.rightbuttonsAlert{
    background-image: url("../img/Button.jpg");
    background-repeat:no-repeat;
    padding:  12px 0 20px 11px;
}
.rightbuttonsAlert a{
    color:red !important;
}

.rightbuttonsAlert a:hover{
    color:blue !important;
}

.rightbuttonsDir{
    background-image: url("../img/Button.jpg");
    background-repeat:no-repeat;
    padding:  9px 0 20px 11px;
}
.shifttd{
    padding-right:27.5px;
    padding-bottom:27.5px;
}

img.buttonUlti{
    float:right;
    margin-top:13px;
    margin-bottom:15px;
}

.shiftRes{
    margin-left:27px;
    padding-top:40px;
}

.departstyle{
    font-size: 18px !important;
    font-weight:bold;
    padding-left: 9px;
    padding-bottom: 5px;
    font-family:calibri !important;
}

.resstyle{
    font-size: 18px !important;
    font-weight:bold;
    text-align:left;
    padding-left:15pt;
    padding-bottom:7px;
    font-family:calibri !important;
}

#content-wrapper{
    clear:both;
    margin:0;
    padding:0;
}

.styletext{
    font-size:8pt !important;
    font-style:italic;
}

.sizetext{
    font-size: 8pt !important;
}

.title{
    font-size:9pt !important;
    font-weight:bold;
    color:blue;
}

.shiftTitle{
    margin-top:5px;

}

/*MEDIA*/

@media screen and (max-width:939px){
    #banner-wrapper{
        margin-left:auto;
        margin-right:auto;
        padding:0;
        background-image: url("../img/Banner.jpg");
        background-repeat: no-repeat;
        padding-bottom:83px;
    }
}

显示问题的图片。以下是IE中显示间距的问题：

以下图片位于Chrome中：

正如您所看到的，内容之间的间距是关闭的，不确定原因任何帮助将不胜感激

由于

Answer 1

您面临的问题是不同的浏览器有不同的标准＆＃34;例如，CSS会对您网页中的line-height值进行不同的解释，或者使用特定浏览器浏览器的默认设置。

您当前的方法似乎是，如果某些浏览器出现问题，您可以通过添加另一个特定于该浏览器的异常来尝试取消该异常。这不是解决此问题的最佳方式，并且很容易为每个浏览器加载更多特殊情况。

1）

有几个选项可以解决这些不一致问题，最简单的方法是使用CSS Normalizer，它应该在CSS样式表之前加载，并为所有浏览器设置标准，显示页面＆＃ 39; s元素都是一样的。

2）

或者，您应该在CSS 所有值中设置，这样您就不会依赖浏览器默认设置，例如line-height等。您可以设置您注意到的每个值浏览器解释不一致（这是Normalize的做法）。

所以例如：

span {
    line-height:1.1rem;
}

这将取代任何浏览器默认line-height值。在Chrome或Firebug in Firefox中使用Inspector查看和评估影响页面上每个元素的各种CSS规则。

3）

您还可以尝试将供应商前缀用作remarked here，以便某些CSS规则仅应用于某些浏览器，但这些工作的方式并非一成不变，这仍然是尝试修复的错误解决方案另一个例外的例外。

IE的供应商前缀为-ms-<property>。

4）

为了向后兼容旧的（9前）IE和其他旧浏览器，我建议下载并运行Modernizr，它将检测浏览器可以使用的CSS和样式功能，然后适合应用的样式通过样式表到该规范。

我相信有一些含糊不清的信息。关于如果Modernizr运行良好使用 CSS Normalizer，那么如果存在任何方面重叠问题，可能会使用其中一个。

我最强烈的建议是你在这里使用方法 1 。方法2是一个选项和方法三，只是一个可以帮助您的想法。

选项 4 - Modernizr - 解决了旧版9之前的Internet Explorer显示问题。

CSS样式只适用于所有IE和Firefox？

1 个答案:

1）

2）

3）

4）