Question

Internet Explorer的行为与Firefox，Chrome，Opera，Safari不同。看到我的问题： HTML link with padding and CSS style active does not work

这是未定义的行为吗？或者我需要报告错误。如果以后，哪个浏览器做得对？

这是一个测试代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>css active padding href problem</title>
        <style type="text/css">
            a{
                background:#CCC;
                border:1px solid #666;
                padding:0 35px 0 0;
            }
            a:active{
                padding:0 0 0 35px;
            }
        </style>
    </head>
    <body>
        <div>
            <p>Click on <i>Stack</i> - href does not work.
               Click on <i>Overflow</i> - href works.
               All browsers are affected.
               Except IE.</p>
            <a href="https://stackoverflow.com/">StackOverflow</a>
        </div>
    </body>
</html>

Answer 1

我认为IE做错了。 a：当鼠标按钮关闭时，活动正在工作，但在鼠标按钮再次启动之前，href不会关闭。

的伪代码：

onmousedown(e) {
  setCssAsActive();
}
onmouseup(e) {
  activateHref();
}

如果鼠标在元素之外上升，则不会发生任何事情。尝试单击链接，然后将鼠标拖离链接，然后释放按钮。什么都不应该发生。

这就是代码中发生的事情。当您单击堆栈文本时，链接会从指针移开，当您释放按钮时，链接不再位于指针下方。它在发布时移回，但是为时已晚。

因此，我认为IE出错了。

Answer 2

我认为主要问题是IE框模型，如http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

所述

由于链接说IE包含框中的填充，这就是链接在IE上工作但不在任何其他浏览器上的原因，这可以通过在上面的示例中将填充更改为边距来证明，或者http://jsfiddle.net/S5dGw/

虽然大多数人（包括我自己）都会说这是一个IE漏洞，但有些人会说这是一个W3C问题。 http://www.crossbrowser.net/82/internet-explorer-box-model-is-not-a-bug/ scoff 。

完全支持CSS3时（不久的将来:)）不用担心，它会有box-sizing属性，可以解决这个问题，见下文：

http://www.w3.org/TR/css3-ui/#box-sizing

我应该在哪里报告错误 - Firefox或Internet Explorer？

2 个答案: