Блог

Главная - Вопросы по программированию - Сайт не работает корректно в Safari

Сайт не работает корректно в Safari

#html #css #safari #opera

#HTML #css #safari #opera

Вопрос:

Я создал этот сайт для школьного проекта, он отлично работает во всех браузерах… кроме safari (и Internet Explorer, но да .. IE ..). В любом случае, мой class=»logo1″ больше не отстает от моего class =»middentextvak1″, хотя он отлично работает в других браузерах. Я действительно больше не знаю, что делать.

http://athena.fhict.nl/users/i283951/NRV/home.html

Я не знаю, нужно ли добавлять код, потому что его много.

Я загрузил 2 картинки, на которых вы можете видеть, что логотип правильно размещен на первой: http://nl.tinypic.com/view.php?pic=fvv8cpamp;s=8#.U6c87fl_vcM

а во втором вы можете видеть на картинке логотип, падающий на дно: (см. Комментарий, не могу опубликовать из-за репутации)

HTML:

 <div class="midden">
    <img class="logo1" src="images/logo.png">
    <div class="middentextvak">
        <h1>Welkom bij autorijschool NRV! </h1>
        <p>In Veldhoven en omgevingen verzorgen wij uw complete rijopleiding in onze volkswagen.
            Een rijopleiding met oog voor detail. U en uw behoefte staan hierbij steeds centraal.
            Onze ervaren instructeur geeft u een moderne rijopleiding geheel afgestemd op uw aanvangsniveau. Zo ben u altijd verzekerd van het zo mogelijk behalen van uw rijbewijs tegen een zo laag mogelijke prijs.
            <br><br>
            Klik <a href="http://www.rijschoolgegevens.nl/index.asp?pageid=2amp;examenplaats=75amp;rijschoolid=5285amp;fromsearch=1">hier</a> voor de meest recente slagingspercentage.
        </p>
    </div>
    <div class="contactvlak1">
        <h1>Contactgegevens</h1>
        <p><b>Autorijschool NRV</b>
        <br>Grasplein 2
        <br>06-21710000
        <br>info@autorijschoolNRV.nl
        <br>55.18.77.391 ABN Amro
    </div> 
</div>

css:

 .middentextvak1
{
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 43%;
    height: 90%;
    background: rgba(255, 255, 255, 0.5);
    margin-top: 7%;
    z-index: 10;
}

.logo1
{
    position: fixed;
    display: block;
    margin-left: 17%;
    margin-right: auto;
    width:70%;
    z-index: -1;
    opacity:0.5;
    clear: both;
}

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

1. Это раздражает, когда это происходит. Попробуйте опубликовать несколько примеров вашего кода. Между тем, вот возможное решение вашей проблемы: попробуйте установить положительный z-индекс .middentextvalk1 для вашего CSS. Обычно значение по умолчанию равно 0, но Safari может обрабатывать его по-другому.

2. Пожалуйста, прочитайте причину закрытия.

Ответ №1:

Попробуйте использовать position:absolute вместо position: fixed в стиле .logo1. Это должно расположить его относительно промежуточного div.

Кроме того: Safari в Windows устарел, поэтому вам действительно нужно беспокоиться об этом только на Mac.

Если вы хотите, чтобы он был исправлен (т. Е. Всегда в одном и том же положении), то эта строка предотвращает это для меня в Firefox и Safari —

 @media only screen and (orientation:landscape){
body {  
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
 }
}

не уверен, что вы пытаетесь с этим сделать.

Вероятно, также было бы разумнее установить логотип в качестве фонового изображения, если он работает как фоновое изображение, а не как контент.