固定在Internet Explorer中的定位？
[英]Fixed positioning in internet explorer?
问题描述
I just wrote a sample page with a corner banner and tool tip. 
我刚刚写了一个带有角落横幅和工具提示的示例页面。 Everything is working just fine with firefox. 使用firefox，一切正常。 But in IE things are not working correctly. 但在IE中，事情并没有正常运作。 I surfed the internet and found that IE doesn't support position: fixed. 我上网，发现IE不支持位置：修复。
So does anyone know how to work around this problem ? 那么有谁知道如何解决这个问题？
Here is my source code 这是我的源代码
<!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>
4 个解决方案
解决方案1
2 2010-01-28 01:11:56
Do you mean "doesn't work in IE6"? 你的意思是“在IE6中不起作用”？ The following fixed position CSS works fine for me to anchor a footer to the bottom of a page in IE7 and IE8: 以下固定位置CSS可以在IE7和IE8中将页脚锚定到页面底部：
Div.Footer { background-color: #f8f7ef; position:fixed; margin: 0px; padding:4px; bottom:0px; left:0px; right:0px; font-size:xx-small; }
解决方案2
1 2013-03-18 03:17:39
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');
This would float the element in the very top right corner. 这会将元素浮动在右上角。 If you wanted to position it elsewhere, change the 0 in expression(0+( for either value 如果要将其放在其他位置，请更改expression(0+(的0 expression(0+(对于任一值）
Internet Explorer 6 understands position:absolute , which is a good basis for this working. Internet Explorer 6理解position:absolute ，这是此工作的良好基础。 The similarity between absolute and fixed positioning is that it removes it from the flow of the normal content. absolute positioning和fixed positioning之间的相似性是它将其从正常内容的流中移除。 So then you use the top and right positionings normally, with a little bit of javascript in there. 那么你通常使用top和right位置，在那里有一点点javascript。 I'm not sure how it reads the javascript. 我不确定它是如何读取javascript的。 But who cares. 但谁在乎。 It works ;) 有用 ;）
解决方案3
1 已采纳 2010-01-28 01:06:09
The problem is that the most popular most used browser - Internet Explorer for Windows - does not understand it, and instead of reverting to position: absolute; 问题是， 最流行的最常用的浏览器--Windows的Internet Explorer - 不理解它，而不是恢复到position: absolute; which would be better than nothing, it reverts to position: static; 它会比没有好，它会恢复到position: static; as specified by the CSS standard. 按CSS标准规定。 This has the same effect as having no position at all. 这与没有任何position具有相同的效果。 Note that IE 7 from beta 2 upwards does support position: fixed; 请注意，从beta 2向上的IE 7确实支持position: fixed; (if you use a document type declaration that triggers strict mode) so I will exclude IE 7 from this fix. （如果您使用触发严格模式的文档类型声明），那么我将从此修复中排除IE 7。
解决方案4
0 2010-01-28 01:33:41
You can sort of hack it in using JavaScript/jQuery. 您可以使用JavaScript / jQuery进行破解。
Eg What is the simplest jQuery way to have a 'position:fixed' (always at top) div? 例如，有一个'position：fixed'（总是在顶部）div的最简单的jQuery方法是什么？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.