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. But in IE things are not working correctly. I surfed the internet and found that IE doesn't support position: fixed.
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>
&l开发者_运维问答t;/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>
Do you mean "doesn't work in IE6"? The following fixed position CSS works fine for me to anchor a footer to the bottom of a page in IE7 and IE8:
Div.Footer { background-color: #f8f7ef; position:fixed; margin: 0px; padding:4px; bottom:0px; left:0px; right:0px; font-size:xx-small; }
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; which would be better than nothing, it reverts to position: static; as specified by the CSS standard. This has the same effect as having no position at all. Note that IE 7 from beta 2 upwards does support position: fixed; (if you use a document type declaration that triggers strict mode) so I will exclude IE 7 from this fix.
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
Internet Explorer 6 understands position:absolute, which is a good basis for this working. The similarity between absolute and fixed positioning is that it removes it from the flow of the normal content. So then you use the top and right positionings normally, with a little bit of javascript in there. I'm not sure how it reads the javascript. But who cares. It works ;)
You can sort of hack it in using JavaScript/jQuery.
E.g. What is the simplest jQuery way to have a 'position:fixed' (always at top) div?
加载中,请稍侯......
精彩评论