2010-11-26 28 views
1

從Internet Explorer火狐,Chrome,歌劇,Safari瀏覽器的行爲不同。見我的問題: HTML link with padding and CSS style active does not work我在哪裏報告錯誤 - Firefox或Internet Explorer?

這是不確定的行爲?或者我需要報告一個錯誤。如果以後,那麼哪個瀏覽器做對了?

下面是測試代碼:

<!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> 

回答

3

我認爲IE是做錯了。 a:當鼠標按鈕關閉時active激活,但在鼠標按鈕重新啓動之前href不會關閉。

僞代碼:

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

如果鼠標上升的元素之外,沒有什麼happends。嘗試點擊一個鏈接,然後將鼠標拖離鏈接,然後釋放該按鈕。什麼都不應該發生。

這就是你的代碼中發生的事情。當您點擊堆棧文本時,鏈接會從指針移開,當您釋放按鈕時,鏈接不再位於指針之下。它在發佈時間後退,但後來太晚了。

因此,我認爲IE是做錯了。

0

主要的問題,我認爲是在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