граница в IE не отображается правильно - PullRequest
Новая
       12

граница в IE не отображается правильно

1 голос
/ 29 июля 2011

Я разместил на веб-странице закругленную границу вокруг Flash SWF, и логотип компании должен располагаться под ним.(Как можно правильно увидеть в Safari, Chrome и т. Д. На http://www.designboutiqueuk.com/loader/index.html).

Проблема заключается в том, что в Internet Explorer граница окутывает вспышку И логотип (логотип не должен быть в пределах границы). Также в некоторыхВ версиях IE все кажется расположенным слева, тогда как он ДОЛЖЕН быть центрирован в браузере.Это не конец света, если в IE граница не закруглена - я считаю, что это пока невозможно, хотя, если вы знаете это иначебудет бонусом! Любая помощь будет принята с благодарностью. Большое спасибо.

Ответы [ 4 ]

2 голосов
/ 29 июля 2011

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1 голос
/ 29 июля 2011

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

<div style="width:800px;margin:20px auto">
  <div style="width: 800px; margin: 0 auto; padding: 20px; border: #DD002B solid 2px; border-radius: 10px; -moz-border-radius: 10px;">
      <div align="center">

      //movie stuff here

      </div>



  </div>
    <div style="margin: 0px 0px 0px -20px; padding: 40px 0px; display:block; float: left;"><img src="images/gsma_logo.jpg" width="100px"></div>
</div>
1 голос
/ 29 июля 2011

Это происходит потому, что, согласно вашему источнику, ваш логотип div находится внутри фильма div.

<div style="width: 800px; margin: 20px auto; padding: 20px; border: #DD002B solid 2px; border-radius: 10px; -moz-border-radius: 10px;">
    <div align="center">

    //movie stuff here

    </div>

    <div style="margin: 0px 0px 0px -20px; padding: 40px 0px; display:block; float: left;"><img src="images/gsma_logo.jpg" width="100px"></div>

</div>

Он всплывает и выводится за пределы обычного потока документов и в сочетании с отступами прекрасно работает в современных браузерах.

Попробуйте разместить логотип за пределами последнего закрытия div выше.

0 голосов
/ 29 июля 2011

используйте этот CSS: 

#movie {
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
padding: 20px; 
border: #DD002B solid 2px; 
border-radius: 10px; 
-moz-border-radius: 10px;
}
#logo {
width: 100px;
height: //logo height
margin-left: auto;
margin-right: auto;
float: left;
display: block;
clear: both;
}

<div id="movie">
 //movie stuff here
</div>
<div id="logo"><img src="images/gsma_logo.jpg" width="100px"></div>
...