Значение ширины CSS для соответствия атрибуту ширины встроенного содержимого (iframe, object, embed) - PullRequest
Новая
       27

Значение ширины CSS для соответствия атрибуту ширины встроенного содержимого (iframe, object, embed)

0 голосов
/ 12 октября 2011

Я использую сеточный макет, который, короче говоря, выглядит следующим образом: 

<div class="width-2">
    <h1>300px</h1>
    <div class="embed-container">
        <iframe width="400" height="400" ...></iframe>
    </div>
</div>

Соответствующий CSS: 

h1 { width: 300px; }
.width-2 { width: 600px; }
.embed-container > iframe { width: 100%; /* Must turn out to be 600px wide */ }

Проблема начинается, когда я хочупредставьте auto width: 

<div class="width-auto">
    <h1>300px</h1>
    <div class="embed-container">
        <iframe width="400" height="400" ...></iframe>
    </div>
</div>

с помощью css: 

h1 { width: 300px; }
.width-2 { width: 600px; }

.embed-container > iframe { 
    width: 100%; 
} 
.width-auto .embed-container > iframe { 
    width: auto; /* Must revert to 400px, but doesn't? */ 
}

Я ожидаю, что iframe вернется назад, чтобы взять свою ширину из своего собственного атрибута width и будет 400шириной в пиксели, но вместо этого он имеет ширину 300 пикселей !!!

Вот он в прямом эфире: http://jsfiddle.net/ETUkD/2/

Обратите внимание, что то, что здесь представлено в iframe, это любой встроенный контент, поэтому я неВы хотите переопределить дополнительный атрибут стиля или изменить его любым другим способом.

ОБНОВЛЕНИЕ : Одним из решений является использование селектора :not(), но это не поддерживается Internet Explorer... 

div:not(.width-auto) > .embed-container > iframe { 
    width: 100%; 
}

1 Ответ

0 голосов
/ 12 октября 2011

Решение 1: Вы можете рассмотреть возможность использования Selectivzr.http://selectivizr.com/ Это позволит вам использовать: not () в IE6-8, используя одну из множества библиотек javascript.

Решение 2: Почему бы не быть более конкретным в вашем CSSкак это?http://jsfiddle.net/pkY8K/

.width-2 .embed-container iframe {
    width: 100%;   
}

Объявите, что ширина iframe равна 100%, только когда она в div'е, который, как вы знаете, нужен.А затем бросьте .width-auto .embed-container iframe { width: auto; } полностью.

...