Question

我被要求修复一些我公司另一名工人创建的CSS。该代码包含以下内容：

div#bwrap {
    position: absolute; bottom:35px; left:120px; right: 60px; height:10px;
} body>div#bwrap {position:fixed;}

和：

div#mwrap {
    margin-left:0;
    voice-family: "\"}\""; 
    voice-family:inherit;
    margin-left:16px;padding: 85px 60px 35px 240px;
    font-family: Segoe UI,Tahoma,Verdana,Arial,sans-serif;
} body > div#mwrap { height: 500px; margin-left:0; }

我理解这段代码适用于较旧的浏览器，但有人知道它修复了哪些问题。例如，如果是针对IE6或更早版本，则我们的公司不再使用该浏览器。

我还需要：

body>div#bwrap {position:fixed;}

and

voice-family: "\"}\""; 
        voice-family:inherit;

Answer 1

IE6不支持>选择器，因此对body>div#bwrap的引用在IE6中不起作用。

由于它们与div#bwrap上方的主选择器实际上相同，这意味着body>div#bwrap内的位是IE6以外的浏览器的覆盖。

在第一个示例中，IE6会生成一个位于absolute的元素，而所有其他浏览器都会将其定位为fixed。如果您不再支持IE6，则可以将该样式移至主div#bwrap选择器并删除body>div#bwrap。

您可以在此处找到有关各种浏览器中支持的CSS选择器的更多信息：http://quirksmode.org/css/contents.html

voice-family位是一个黑客，它告诉黑客浏览器忽略选择器中的其余样式。它也是IE6特有的，所以如果你再次放弃IE6支持，你可以放弃黑客攻击。您可以在此处找到有关此黑客攻击的更多信息：http://tantek.com/CSS/Examples/boxmodelhack.html

第二个示例还有一个匹配的>选择器，您需要以与第一个示例相同的方式处理它，尽管两者都指定margin-left（因为他们正在使用此分离IE6的方法，我不知道为什么他们也为语音家庭黑客打扰了。）

Answer 2

语音家庭/盒子模型黑客绝对是旧浏览器（如IE5，旧）。有关详细信息，请访问here。

定位的事情我不确定。可能与之相关的Here's some information。具体来说，“IE＆gt; = 6”部分，它提到了一个黑客并注意到它打破了position: absolute;。没有上下文，并且考虑到格式，我认为它也是一个较旧的格式。我会说出来并检查IE7 / 8以查看它是否会影响它。我认为IE8有开发人员工具（比如Firefox的Firebug插件），但我不确定IE7，但如果它们可用，你也可以检查它们。

Answer 3

我的评论可能是多余的，但以下是我要考虑的要点：

div #bwrap（你通常不需要'div'位，省略它更清楚。）
如上所述，语音家庭部分是一个非常古老的黑客，应该删除
如果您明确不支持IE6，则可能不需要子选择器“＆gt;”在所有
固定位置不适用于某些Webkit浏览器，如Mobile Safari

如果你确实需要支持IE6，那么子选择器是你最好的朋友：

#bwrap {...所有浏览器 - 包括ie6 ...}
html＆gt; body #bwrap {...现代覆盖：Firefox，safari，opera，ie7 + ...}

如果你真的需要在IE6中修复它，那么只实现'现代覆盖'。

在IE6之后我还需要将这个CSS用于浏览器吗？

3 个答案: