Question

我为一个学校项目创建了这个网站，它在所有浏览器上都很完美......除了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=fvv8cp&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=2&examenplaats=75&rijschoolid=5285&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;
}

Answer 1

尝试使用position：absolute而不是position：固定在.logo1样式上。这应该相对于midden div来定位。

此外：Windows上的Safari现已过时，因此您只需要在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);
 }
}

不确定你要做的是什么。

如果将徽标设置为背景图像而不是内容，那么将徽标设置为背景图像可能更有意义。

站点在Safari上无法正常工作

1 个答案: