IE 6 и 7 проблема наследования фона, как мне решить эту проблему? - PullRequest
2 голосов
/ 17 мая 2010

Когда я пытаюсь создать прямоугольник с закругленными углами, он отлично работает на FF и IE8, но на IE6 и IE7, любой div внутри коробки получает последний фон, но если вы установите все div на уровне, где не должно быть фоном есть фон: ни один не показывает никакого фона на уровне, который предшествует

* Код указывает на живые изображения в Image Shack, поэтому вы можете сохранить и запустить его, чтобы он нормально работал в Firefox, но вы можете увидеть, что происходит в IE6 / 7.

Также я не могу дать конкретный класс для интенсивности внутри "фона" контейнера, потому что это CMS, которую я пытаюсь стилизовать!

Добавлено: CMS is Joomla

код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Problem With IE6 and 7</title>
<style type="text/css">
* {padding:0px;
margin:0px auto;}

body {font-family:Verdana, Geneva, sans-serif;
color:#666;
font-size:14px;
text-align:justify;}

.background {width:300px;}

.background div {background:url(http://img6.imageshack.us/img6/5763/76022084.png) repeat-y;}

.background div div {background:url(http://img253.imageshack.us/img253/444/97936614.png) top left no-repeat;}

.background div div div {background:url(http://img13.imageshack.us/img13/3667/45918712.png) bottom left no-repeat;}

.background div div div div {padding:15px;
background:none;}

</style>
</head>
<body>

<div class="background">

<div><div><div><div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sagittis nisl. Nullam facilisis volutpat metus eu semper. Sed eleifend, mi sed rhoncus interdum, neque quam pellentesque diam, in tincidunt metus nulla in ligula. Donec dui tellus, ultricies vel venenatis vitae, aliquam et purus. Cras eu nunc urna, in placerat quam. Pellentesque lobortis pellentesque orci, a tempus diam consequat nec. Aliquam erat volutpat. Aliquam laoreet blandit tellus in mollis. Duis tincidunt, justo sit amet lacinia ultrices, nibh justo venenatis erat, non commodo libero ligula quis ante. Cras eget nulla nec est accumsan porttitor at euismod nulla. Integer pharetra lacinia malesuada. Donec commodo vestibulum est, eget pellentesque velit volutpat nec. In id erat nec ipsum consequat convallis id non libero. Sed dui nisl, molestie vel dignissim sed, mattis in est. Vestibulum porttitor posuere ipsum, id facilisis libero dapibus et. Fusce consequat malesuada nulla, vitae faucibus neque consectetur eget. Curabitur porta dapibus justo dictum porttitor. Curabitur facilisis faucibus diam, vel dapibus ipsum ornare sed. Vestibulum turpis nulla, facilisis condimentum sodales sed, imperdiet placerat mi. Cras ac risus ipsum. </p>

</div></div></div>

</div><!-- class background end here -->

</body>
</html>

Ответы [ 5 ]

0 голосов
/ 17 мая 2010

Что ж, у меня он работает в IE6 согласно моему коду ниже, попробуйте это:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Problem With IE6 and 7</title>
<style type="text/css">
* {padding:0px;
margin:0px auto;}

body {font-family:Verdana, Geneva, sans-serif;
color:#666;
font-size:14px;
text-align:justify;}


.background {width:300px;}
.background div { background:url(http://img6.imageshack.us/img6/5763/76022084.png) repeat-y; }
.background div div { background:url(http://img253.imageshack.us/img253/444/97936614.png) top left no-repeat;}
.background div div div { background:url(http://img13.imageshack.us/img13/3667/45918712.png) bottom left no-repeat; }
.background div div div div { padding: 15px; }
</style>
</head>
<body>

<div class="background">
  <div>
    <div>
        <div>
            <div>
                <p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p>
            </div>
        </div>
    </div>
  </div>
</div>

</body>
</html>

[РЕДАКТИРОВАТЬ] - Я понял, что вам не нужны КЛАССЫ на ваших DIVs - поэтому я удалил их, код все еще работает в IE6 / 7/8/9 и FF / Chrome и т. Д.

* Я опубликовал результаты теста браузера для вас: http://dch.litmusapp.com/pub/ed402a3 * Не говорите, что я ничего не делаю!

-Neuro

0 голосов
/ 17 мая 2010

Во-первых, я бы предложил поставить классы на каждый div и нацелить их напрямую. (Обратите внимание, что в вашей разметке отсутствует div, хотя исправление не исправляет IE).

<style type="text/css">
  .background .sides { /* side image */ }
  .background .top { /* topimage */ }
  .background .bottom { /* bottom image */ }
  .background .inner { /* padding etc - no need to override background */ }
</style>

<div class="background">
  <div class="sides">
  <div class="top">
  <div class="bottom">
  <div class="inner">
      <p>Lorem ipsum...</p>
  </div>
  </div>
  </div>
  </div>
</div>

В качестве альтернативы, вы можете использовать прозрачный GIF для последнего div. Я протестировал один из них, найденный в Google Images, и он работает для меня в IE7 (у меня нет доступа к IE6):

.background div div div div { padding:15px; background:url(http://1stforcrafts.com/images/button_transparent.gif); }
0 голосов
/ 17 мая 2010

Вы пытались использовать более конкретные свойства, такие как background-image и background-position? Это немного многословно, но может быть достаточно для более эффективного переопределения фона.

.background div {background-image:url(http://img6.imageshack.us/img6/5763/76022084.png); background-repeat:repeat-y}

.background div div {background-image:url(http://img253.imageshack.us/img253/444/97936614.png); background-position:top left; background-repeat:no-repeat}

.background div div div {background-image:url(http://img13.imageshack.us/img13/3667/45918712.png); background-position:bottom left; background-repeat:no-repeat}

.background div div div div {padding:15px; background-image:none}
0 голосов
/ 17 мая 2010

Это немного логичный кошмар.

Вы уже пробовали использовать! Важный?

например:

.background div div div {background-image: url (http://img13.imageshack.us/img13/3667/45918712.png)! Важный; положение фона: слева внизу! Важный; повторение фона: без повтора! Важный;}

Лучше записано как:

.background div div div {background: url (http://img13.imageshack.us/img13/3667/45918712.png) без повторов 0 100%! Важный;}

0 голосов
/ 17 мая 2010

волна, которую вы пытались использовать .background > div > div и так далее? используя >, вы применяете этот стиль только к прямому дочернему элементу.

...