Question

是否可以设置div的样式以使其对布局没有影响？（好像标签不在html中）

我问的原因是我计划在ie7上创建css3多列布局的解决方法，ie8＆amp; IE9。

在这些版本的ie上，列将使用垂直div实现。但是，在支持css3列的浏览器上，我希望这些div具有零效果（但是，即，我将覆盖它以创建列）。我可以创建一个执行此操作的css类吗？

e.g。

<div class="noeffect">
<div class="item">item1</div>
<div class="item">item2</div>
</div>

<div class="noeffect">
<div class="item">item3</div>
<div class="item">item4</div>
</div>

<div class="noeffect">
<div class="item">item5</div>
<div class="item">item6</div>
</div>

因此在IE上'noeffect'可以被覆盖以显示3列，但是在其他浏览器上，可以使用多列布局来显示1,2,3,4,5或6列。

Answer 1

IE7，IE8和IE9支持所谓的conditional comments。这些允许您仅在IE浏览器符合条件时包含特定内容。

Internet Explorer的条件注释

请注意，这些内容已在IE11中删除，即使通过IE11的开发人员工具模仿旧版IE，也无法呈现。

在您的情况下，我们可以使用if lte IE 9匹配任何小于或等于（lte）IE 9的IE版本来加载特定于IE的样式表：

<!--[if lte IE 9]>
    <link rel="stylesheet" href="IE-Specific-CSS.css">
<![endif]-->

然后，此样式表将覆盖常规CSS文件中的内容。您的head元素最终会看起来像这样：

<head>
    <title>...</title>

    <link rel="stylesheet" href="Regular-CSS.css">
    <!--[if lte IE 9]>
        <link rel="stylesheet" href="IE-Specific-CSS.css">
    <![endif]-->
</head>

所有不是IE版本的IE浏览器只会加载Regular-CSS.css文件，而IE9及更低版本会同时加载Regular-CSS.css和IE-Specific-CSS.css。然后降到specificity以允许特定于IE的CSS声明覆盖其他CSS文件的声明。

CSS示例

/* Regular-CSS.css */
div.noeffect {
    background: #f00;    /* Red background */
}

/* IE-Specific-CSS.css */
div.noeffect {
    background: #0f0;    /* Green background only on IE9 and lower */
}

以上两个选择器（div.noeffect）具有相同的特异性（上面链接），因此只要我们的IE特定CSS文档在之后加载我们的常规CSS文档，特定于IE的CSS将覆盖常规CSS。

仅在IE9或更低版本
中渲染div元素
如果您希望这些div元素仅显示在IE9或更低版本上，您可以在每个div标记周围包含条件注释：

 <div class="item">item1</div> <div class="item">item2</div>   <div class="item">item3</div> ...

Answer 2

如果它在HTML中，CSS将会看到它并在级联中考虑它。 display:none将隐藏div及其中的所有内容。

如果您使用James Donnelly的条件样式表建议，那么是的，可以通过让涉及子div的所有规则提及{{1}来完全忽略.noeffect的规则。 }}。对无类.item的任何引用都可能会提取div。

结构比样式更难：css无法更改页面的HTML层次结构。它不会阻止.noeffect成为.noeffect的父级，也不会阻止所有.item的兄弟姐妹。

Answer 3

将元素完全从流和布局中取出的方法是将其display属性设置为“none”。

div.noeffect {
    display: none;
}

CSS：如何设置div的样式以使其无效

3 个答案:

Internet Explorer的条件注释

CSS示例

仅在IE9或更低版本