Back button and backspace not working in IE on a page with a fixed top div and named links
Either the Back button nor backspace is working in IE on a page with a fixed top div and named links.
Edit: I've clarified my problem with this updated code. Everything works fine in Chrome and Firefox but not in IE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
.divButtons
{
z-index: 999;
position: fixed;
width: 100%;
height: 38px;
top: 0px;
left: 0px;
background-color: #f3f3f3;
border-bottom: #ccc 1px solid;
}
.divFullViewArea
{
position: absolute;
top: 38px;
}
.divViewArea
{
padding-top: 20px;
}
</style>
<!--[if IE]>
<style type="text/css">
* {
margin: 0px
}
html {
min-height: 100%; height: 100%; overflow: auto
}
body {
min-height: 100%; height: 100%; overflow: auto
}
.divFullViewArea {
position: relative;
padding-bottom: 8px; padding-left: 8px; width: 100%; padding-right: 8px; height: 95%; overflow: auto; padding-top: 8px
}
.divFullViewArea * {
margin: auto
}
.divButtons {
position: fixed; margin: 0px; top: 0px; left: 0px
}
* html .divButtons {
position: absolute;
}
</style>
<![endif]-->
</head>
<body>
<div class="divButtons">
Top
</div>
<div class="divFullViewArea">
<p>
<a id="link1" href="#chapter1">Chapter 1</a>
<br>
<a id="link2" href="#chapter2">Chapter 2</a>
<br>
<br>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br开发者_运维技巧><br><br>
<a name="chapter1">Chapter 1</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="chapter2">Chapter 2</a>
<br>
<br>
</p>
</div>
</body>
Any suggestions?
Removing overflow:auto; would fix your issue.
Like so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head></head>
<body>
<div style="position:relative; height: 150px; width: 200px; ">
<p>
<a id="link1" href="#chapter1">Chapter 1</a>
<br>
<a id="link2" href="#chapter2">Chapter 2</a>
<br>
<br>
<br>
<a id="chapter1">Chapter 1</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a id="chapter2">Chapter 2</a>
<br>
<br>
</p>
</div>
</body>
Do you need it to be there? IMO it creates an additional scrolling on the div that should be avoided.
It does not seem to be possible to combine my current CSS with anchor links. My solution is to use this CSS instead: Making IE 5.5+ use position: fixed;
加载中,请稍侯......
精彩评论