У меня проблема с представлением совместимости IE.Я должен учитывать это, потому что некоторые веб-сайты, к сожалению, используются моей компанией.У меня есть панель, которая складывается внизу моего экрана.Он прекрасно работает во всем, кроме представления совместимости IE, и я не могу найти виновника.По сути, я пытаюсь, чтобы родительский div автоматически изменял размер в соответствии с шириной его содержимого.По какой-то причине в представлении совместимости родительский элемент div отображается с шириной экрана 100%.У меня нет какого-либо стиля, который подразумевал бы, что он должен быть на 100%, но он все равно делает это.Я выложу свой код ниже.Пожалуйста, дайте мне знать, если вы можете предложить какие-либо предложения!Спасибо,
Фил
<style>
#bar_wrapper{
position: fixed;
bottom: 0px;
left: 0px;
}
#bottom_bar{
padding: 5px;
height: 90px;
background: url(scoreboards/stats_bar/images/bcktool.gif);
z-index: 9999;
-moz-border-radius-topleft: 8px;
-khtml-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-khtml-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
-moz-box-shadow: 0px 1px 10px #666, inset 1px 1px 0px #a4a4a4;
-khtml-box-shadow: 0px 1px 10px #666;
-webkit-box-shadow: 0px 1px 10px #666;
/* CSS3 end */
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}
#left_side{
float: left;
}
#right_side{
float: right;
}
#minimize{
right: 0px;
top: 0px;
}
#minimize a{
text-decoration: none;
}
.section{
background-color: #e4e4e4;
padding: 5px;
height: 82px;
border-right: 1px solid #a4a4a4;
float: left;
text-align: center;
}
.heading{
font-weight: bold;
}
table{
text-align: left;
}
</style>
<div id="bar_wrapper" class="clear">
<div id="bottom_bar" style="display: none;">
<div id="left_side">
<div class="section" style="text-align: center;">
<span class='heading'>PR. to UW. Submit AVG: </span> <br />
<span id="pr_to_uw"></span> day(s)
</div>
</div>
<div id="right_side" style="height: 90px;">
<br />
<div id="up_arrow" style="display: none;"></div>
<div id="minimize">
<a href="javascript:minimize();">img</a>
</div>
</div>
</div>
</div>