Блог

Главная - Вопросы по программированию - фон css-позиция не работает в IE 7 и 8

фон css-позиция не работает в IE 7 и 8

#css #internet-explorer #cross-browser

#css #internet-explorer #кроссбраузерный

Вопрос:

Эта страница отлично отображается в FF, Chrome и т.д.. Однако в IE 7 и 8 закрывающий символ «X», который является фоновым изображением, не выстраивается в линию. Есть идеи? Я попытался установить background-position и т.д..

Код, который у меня есть: 

 .startup-container
{
  width: 455px;
}

.close-startup-home 
{
  background: #c00 url("http://spotlightonhealthyliving.com/btn_closex.png") 0px -8px no-repeat;
  float: right;
  height: 52px;
  width: 60px;
}

.menu-outer
{
  background: #545454;
  -moz-border-radius:5px; 
  border-radius:5px;
  -moz-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .4);
  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .4);

}

.menu-inner
{
  background: #3f3f3f;
  -moz-box-shadow: inset 0px 0px 4px 3px rgba(0, 0, 0, .1);
  box-shadow: inset 0px 0px 4px 3px rgba(0, 0, 0, .1);
  -moz-border-radius:5px; 
  border-radius:5px;
}

.startup-box
{
  width:439px;
  line-height:20px;
  text-align: center;
  color:#fff;
  padding-top:5px;
  padding-bottom:5px;
}

.startup-box-inner
{
  width:389px; 
  height:99px;
  padding:20px;
  margin-left:5px;
  margin-right:5px;
}  
 <div class="startup-container">
  <div class="close-startup-home"></div>
  <div class="menu-outer startup-box">
    <div class="menu-inner startup-box-inner"></div>
  </div>
</div>

Комментарии:

1. У меня отлично работает в IE8

2. @Pekka IE7 эмулировал, что это не так, но IE8 работает нормально. Честно говоря, кто-нибудь еще использует IE7?

3. @Howdy_McGee: К сожалению, некоторые все еще работают.

Ответ №1:

Укажите position: absolute на свой div файл, содержащий кнопку закрытия, и расположите его в соответствии с этим.

 .startup-container {
    width: 455px;
    position: relative
}

.close-startup-home {
    background: #c00 url("http://spotlightonhealthyliving.com/btn_closex.png") 0px -8px no-repeat;
    float: right;
    height: 52px;
    width: 60px;
    position: absolute;
    right: 0; 
}

Комментарии:

1. Мне пришлось добавить к нему z-index: , но в остальном .. Работает отлично! Ты лучший!