CSS/div positioning that does not work in IE_问答_开发者

CSS/div positioning that does not work in IE

开发者 https://www.devze.com 2023-03-23 13:27 出处：网络

I have been searching for an answer for a good hour without luck so It may be OK to ask my silly question:

I am trying to overlay a legend over a map. The map is generated with openlayers and lives in a div called map. the legend is an html table but could be a picture as well and lives in another div called legend.

hence the HTML

<body>
<div id="map"></div>
<div id="legend"></div>
</body>

and the CSS

* {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: none;
    font-family: Arial;
    font-size: 9px;
    text-decoration: none;
    text-align: left;
    }
html, body {
    background-color: red;
    }
#map{
    position:relative;
}
#legend{
  position:absolute;
  top: 1%;
  left: 100px;
}

This works just fine in Firefox, Safari and Chrome, but not in IE8.

In IE8 the legend is shown in its place, the red page background is behind but the map div has disappeared. Note that IE still loads the map tiles etc but开发者_如何学C seems to be putting them either behind the background or somewhere not on the screen...

If you have any suggestions, greatly appreciated!

Without the whole HTML page, it can be hard to give you a correct answer, to know what's exactly going on. Though you can use conditional IE tags to make your design work in Internet Explorer. More information here.

You will find that most IE8 quirks can be fixed by changing the positioning by a few pixels, position type, the display: value, or making elements at display:none;.

Firebug is your friend.