Question

我目前正在研究的网站是：www.ernestoblancarte.com

它的流畅布局，它在Chrome和资源管理器中运行良好，但在Safari中尝试它的比例很糟糕，我无法让它在两个浏览器中工作，请帮忙。

这是css：

提前致谢。

 body{
        background:#FFF;
        font-family:"futuraLT";
        color:#FFF;
        word-spacing:-3px;

        }

    body, html {
        width:100%;
        padding:0px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }


#Background{
    position: absolute;
    margin:0;
    z-index:0;
    }

#Barra{

    }

#Logo{
    z-index:1;
    position:absolute;
    bottom:18.9259%;
    margin-left:17.12083%;
    margin-right:71.166%;
    border-style:none;

    }
#Center{
    height:85%;

    }

#Banner4{
    margin-top:0px;
    margin-left:43.672%;
    margin-right:20.8854%;
    position:absolute;
    }

#Banner3{
    max-width: 100%;
    margin-top:11.65%;
    margin-left:20.8854%;
    margin-right:41.5625%;
    position:absolute;
    }

#Banner2{
    margin-top:23.2744%;
    margin-left:43.672%;
    margin-right:20.8854%;
    position:absolute;
    }


#Banner1{
    margin-top:34.75%;
    margin-left:20.9634%;
    margin-right:46.35416%;
    position:absolute;
    }

#BarrTXT{
    position:absolute;
    z-index:3;
    margin-top:47.12511%;
    width:100%
    }

#Menutxt{
    position:absolute;
    left:30.5208%;
    top: 30%;
    width:4%;
    margin:0 auto;
    }

#Menutxt2{
    width:5%;
    position:absolute;
    left:38.125%;
    top:16%;
    }

#Menutxt3{
    width:4%;
    position:absolute;
    left:46.875%;
    top:30%;
    }

#Menutxt4{
    width:4%;
    position:absolute;
    left: 57.38166%;
    top: 30%;
    }


#Menutxt5{
    width:4%;
    position:absolute;
    left: 68.333%;
    top: 30%;
    }

Answer 1

也许是：

 margin-top: calc( 100vw * .1165 );

但我也看不到

position: relative

在绝对定位元素的任何包含元素

流体设计兼容性问题的麻烦

1 个答案: