Fixed position DIV that works fine in Chrome and Safari but not in IE11
Question
This CSS causes a Button to be anchored at the bottom of the screen of our website. The button stays anchored to the bottom of the page when scrolling up or down. In IE, it just renders the button right where the DIV code is located instead of floating it and anchoring it to the bottom of the browser. Chrome and Safari both show the button at the bottom right of the browser window. I have gone through several articles and tried different CSS settings but cannot seem to get it. Any help would be greatly appreciated. Thanks!
<style type="text/css">
div[id="bottomButton"] {
position: fixed;
bottom: -20px;
right: 45px;
border: none;
z-index: 50;
border-color: transparent;
width: inherit;
}
</style>
1 answers
solution1
1 2014-07-18 15:56:46
you are missing HTML doctype in your code. Try below code.
<!DOCTYPE html>
<html>
<head>
<script>
</script>
<style type="text/css">
#bottomButton {
position: fixed;
bottom: -20px;
right: 45px;
border: none;
z-index: 50;
border-color: transparent;
width: inherit;
}
</style>
</head>
<body>
<div id="bottomButton">
<button>mybutton</button>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.