在Internet Explorer中的固定位置？

我剛寫了一個帶有角橫幅和工具提示的示例頁面。 Firefox的一切都運行良好。但在IE瀏覽器中工作不正常。我瀏覽了互聯網，發現IE不支持位置：固定。
那麼有誰知道如何解決這個問題？
這裏是我的源代碼在Internet Explorer中的固定位置？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
    <head> 

    <style type="text/css"> 
.tooltip { 
    width: 200px; 
    position: fixed; 
    top:auto; 
    bottom:70px; 
    right:70px; 
    left:auto; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: xx-small; 
} 
#cornerbanner { 
    position: fixed; 
    top:auto; 
    left:auto; 
    right:0px; 
    bottom:0px; 
} 
    .tooltip .tooltip_top { 
    background-image: url(images/Box_BG_01.png); 
    height: 34px; 
    background-repeat: no-repeat; 
    background-position: center top; 
    line-height: 45px; 
    text-align: right; 
    padding-right: 30px; 
    vertical-align: text-bottom; 
    font-size: xx-small; 
    font-weight: normal; 
    overflow: hidden; 
} 
body { 
    background-color: #F90; 
} 
.content p { 
    font-family: Verdana, Geneva, sans-serif; 
    color: #000; 
    font-size: x-small; 
    text-align: justify; 
    padding: 15px; 
    border: 1px solid #FFF; 
} 
.tooltip .tooltip_top a { 
    text-decoration: none; 
    color: #333; 
} 
    .tooltip .tooltip_con { 
    background-image: url(images/Box_BG_03.png); 
    background-repeat: repeat-y; 
    padding-right: 20px; 
    padding-left: 20px; 
    display: block; 
    clear: both; 
    text-align: justify; 
    letter-spacing: normal; 
} 
.content { 
    width: 800px; 
    margin-right: auto; 
    margin-left: auto; 
} 
    .tooltip .tooltip_bot { 
    background-image: url(images/Box_BG_05.png); 
    height: 24px; 
    background-repeat: no-repeat; 
    background-position: center bottom; 
} 
    .tooltip .tooltip_con #tooltip_link { 
    text-align: right; 
    color: #666; 
    text-decoration: none; 
    margin-top: 10px; 
} 
    .tooltip .tooltip_con #tooltip_link a { 
    color: #666; 
    text-decoration: none; 
} 
    .tooltip .tooltip_con img { 
    float: right; 
    margin-right: 5px; 
    margin-left: 5px; 
} 
    </style> 
    <script src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $(".tooltip").fadeOut(0); 
      $("#cornerbanner").mouseover(function(){ 
      $(".tooltip").fadeIn("slow") 
      }); 
      $("#close_tooltip").click(function(){ 
      $(".tooltip").fadeOut(); 
      }); 
     }); 

    </script> 
    </head> 
<body> 
<div class="content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel ligula 
     leo, ac aliquet ante. Sed ut elit et purus ultricies ornare. Sed eu justo sem. 
     Suspendisse convallis elementum eros, vitae consequat lorem sollicitudin vitae. 
     Phasellus bibendum, libero ac semper lobortis, orci tellus lacinia nisl, eget 
     luctus risus felis sed dolor. Phasellus commodo imperdiet neque vitae elementum. 
     Ut iaculis vestibulum velit cursus blandit. Cras ornare iaculis velit, vitae 
     malesuada mi mattis tempor. Ut consequat dapibus massa eget scelerisque. Quisque 
     sed suscipit sapien. Duis metus urna, consequat tempor feugiat sit amet, placerat 
     non lorem. Integer eget urna elit, et ullamcorper libero. In iaculis aliquet</p> 
      <div id="tooltip_link"><a href="http://www.google.com">Click here</a></div> 
      </div> 
      <div class="tooltip_bot"></div> 
    </div> 
</body> 
</html>

來源

2010-01-28 taabouzeid

你可能有更好的答覆在DOCTYPE（http://www.doctype.com）。 – 2010-01-28 01:03:26

的問題是，~~最流行~~最常用的瀏覽器 - 互聯網瀏覽器的Windows - 不理解和，而不是恢復到position: absolute;這將是聊勝於無，它按照CSS標準的規定回覆到position: static;。這與根本沒有position具有相同的效果。請注意，從測試版2向上的IE 7支持position: fixed;（如果您使用觸發嚴格模式的文檔類型聲明），所以我將從此修補程序中排除IE 7。

來源

2010-01-28 01:06:09 Kieran

「最受歡迎」與「最常用」不一樣。 IE是目前使用最多的。 – Rob 2010-01-28 01:49:28

我同意搶劫。我討厭它作爲開發人員。即使作爲瀏覽器本身，它也是次要的。一旦政府和大公司可以承諾使用更好，更豐富的功能，統計數據將會改變。 – Kieran 2010-01-28 02:31:38

你的意思是「在IE6中不工作」？下面的固定位置的CSS工作正常，我錨頁腳在IE7和IE8的網頁的底部：

Div.Footer { background-color: #f8f7ef; position:fixed; margin: 0px; padding:4px; bottom:0px; left:0px; right:0px; font-size:xx-small; }

來源

2010-01-28 01:11:56

您可以排序的本事在使用JavaScript/jQuery的。

E.g. What is the simplest jQuery way to have a 'position:fixed' (always at top) div?

來源

2010-01-28 01:33:41

position: absolute; 
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
right: expression(0+((e=document.documentElement.scrollRight)?e:document.body.scrollRight)+'px');

這會浮動在最右上角的元素。如果您想將其放置在其他位置，請將expression(0+(中的值更改爲

Internet Explorer 6理解爲position:absolute，這是此工作的良好基礎。 absolute和fixedpositioning之間的相似之處在於它將其從正常內容的流中移除。那麼你通常使用top和right定位，並在那裏使用一點點的javascript。我不知道它是如何讀取JavaScript的。但誰在乎。它的工作原理;）

來源

2013-03-18 03:17:39

在Internet Explorer中的固定位置？

回答

相關問題