This is my 'brevity' HTML
<html>
<head>
<style type="text/css">
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat 50% 36.1em;
overflow-x:hidden;
}
</style>
</head>
<body class="custom one_sidebar">
<div class="header_area"></div>
<div class="content_area"></div>
</body>
</html>
The problem is that the background image location does not work in IE7. It does in IE8 and just about every other browser. Would like some help in figuring out why.
that is because you mix up percent & em in the position. For IE7 you have to use 2 times the same, percent/px or em:
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat 50% value%;
overflow-x:hidden;
}
or
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat value_em 36.1em;
overflow-x:hidden;
}
First, be sure you have a Doctype selected, as without one, it will trigger Quirks mode and IE will not render some shorthand background properties correctly (or at all).
Try adding display: block
, and a proper width and height to the sidebar CSS. IE has known issues with rendering some properties when the element isn't strictly defined as a block element.
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.