Question

我有一个test.css文件，其中包含以下样式：

....
#body
{
    font-family:Verdana, sans-serif;
    font-size:10pt;
    margin:0;
    padding:0;
}

div#inscreenalertcontainer
{
    margin:32px;
    padding:16px;
    width:100%;
}
....

对于IE，width:100%;中需要属性div#inscreenalertcontainer。对于其他浏览器，此属性不是必需的。

有没有办法在test.css中使用一些条件运算符？由于有大约100个css文件，我不想创建另外100个css文件，特定于IE，只是为了改变一个属性。

或者是否可以在JSP中进行更改。

这是我的JSP代码：

<body>
    <div id="InScreenAlertContainer">
    <table  class="inScreenAlert">
    <tr valign="top">
 ....
 ....
</body>

Answer 1

使用Conditional Comments：

<!--[if IE]>
    <style>
    div#inscreenalertcontainer
    {
        margin:32px;
        padding:16px;
        width:100%;
        /*plus other IE specific rules*/
    }
    </style>
<![endif]-->

这已编入所有版本的Internet Explorer，以便为这些浏览器提供特定说明。没有其他浏览器会接受它，这是告诉IE做其他事情的最佳方式，而不是原始CSS中的内容。

Answer 2

目标IE的常用方法是将html标记更改为：

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

然后在你的CSS中你可以写：

.ie #inscreenalertcontainer {
   width: 100%;
}

这项技术可以让您保持代码的可读性和整洁性。

Answer 3

如果参数不会影响其他浏览器，您可以将其保留在那里。或者使用它仅将其应用于IE： http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

您可以选择样式表黑客或条件评论（html）来定位IE并添加

<style>div#inscreenalertcontainer {width:100%}</style>

头文件中的

Answer 4

将此内容添加到您网页的标题部分。这是一个非常好的链接，可以看到更多http://www.quirksmode.org/css/condcom.html

<!--[if IE]>
div#inscreenalertcontainer
{
    margin:32px;
    padding:16px;
    width:100%;
}
<![endif]-->

CSS中的条件

4 个答案: