Question

所以我有这个css代码：

.onetoone{
    position: relative;
    margin: 10px auto 5px;
    padding: 20px;
    width: 878px;
    [if ! IE] height: 1241px;
    [if IE] height: 241px;
    border: 1px solid #AAAAAA;
    behavior: url(PIE.htc);
}

但是我在IE和Firefox中看不到.onetoone有任何不同的高度，两者仍然具有相同的214px高度。它应该在Firefox中具有1232像素高度，在IE 8中具有241像素高度，对吧？

我错过了什么？

感谢您的所有答案。

Answer 1

您是否阅读了使用文件？

根据该网站，您必须编写css并使用其在线tool进行编译，然后您已包含c-css.php以使其正常运行。

@import "/media/css/c-css.php";

根据此website的示例，这应该可以解决问题。

.onetoone{
    position: relative;
    margin: 10px auto 5px;
    padding: 20px;
    width: 878px;
    border: 1px solid #AAAAAA;
    behavior: url(PIE.htc);
}
[if !IE] .onetoone {
    height: 1241px;
}

[if IE] .onetoone {
    height: 241px;
}

编译之后，它变成了一个像here这样的巨大文件，你就像我上面说的那样包含。

但是，我会采用我所知道的良好的老式方式。它是用条件CSS注释包含不同的css

<!--[if IE]>
   <style>
      .onetoone {
        height: 241px;
       }
   </style>
<![endif]-->

<!--[if !IE]>
   <style>
      .onetoone {
        height: 1241px;
       }
   </style>
<![endif]-->

应该以任何方式工作。

更新

不是像我的示例中那样加载不同的样式，而是以这种方式加载所有主要的css文件后最终加载不同的文件。

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

Answer 2

我知道去年已经回答了这个问题，但是我想指出一个似乎没有使用的方法，尽管功能已写入CSS2.1规范。（有关更具体的详细信息，请参阅CSS Conditional Rules Module Level 3。）

-

IE方法是执行以下操作;

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

如维基的Conditional comments部分所述。

-

这里提到的另一种方法是使用Conditional-CSS，这似乎很受欢迎，但我从来没有听说过，也无法举例说明如何使用它，所以链接必须要做！（Sry ppl）。

-

2012年12月以来的新方法：

使用Conditional Group Rules，您可以定义条件，如;

@media print { #navigation { display: none; } }

（取自规范的示例）这将在打印时隐藏导航栏。您可以定义的另一个Conditional Group Rule是@SUPPORTS，例如;

@supports (box-shadow: 2px 2px 2px red)
{
box-shadow: 2px 2px 2px red;
}

并包含“and”，“或”和“not”等运营商;

@supports ((box-shadow: 2px 2px 2px red) and (border-radius: 25px))
{
    box-shadow: 2px 2px 2px red;
    border-radius: 25px;
}

这意味着不是测试客户端浏览器，而是相应地测试css和样式可用的功能。不幸的是，您无法嵌套其他规则（例如@import，它可用于根据css功能的可用性导入特定于浏览器的样式表）。

尝试一下！

Answer 3

您可以在HTML页面中加载另一个CSS文件，例如：

<!--[if lt IE 8]>
    <link rel="stylesheet" href="styles/ie8.css" type="text/css" media="screen" />
<![endif]-->

Answer 4

您可以在课程中添加条件：

[if IE] .ie-height{  
    height: 241px;
}

Answer 5

最好的方法是遵循HTML5 boilerplate方法。

在你的html中添加以下html标签：

<!--[if lt IE 7]> <html lang="en-us" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html lang="en-us" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html lang="en-us" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

因此，在您的风格中，您可以轻松指定具有标准样式的ie版本：

div.this_element { float:right; margin-top: 10px; }
lt-ie8 div.this_element { margin-top: 5px; }

CSS中的条件CSS不起作用

5 个答案:

您是否阅读了使用文件？

更新

IE方法是执行以下操作;

2012年12月以来的新方法：