google-chrome - 流体設計互換サファリの不具合

Question

私が現在取り組んでいるウェブサイトはこれです: www.ernestoblancarte.com

流動的なレイアウトで、Chrome と Explorer では問題なく動作しますが、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%;
    }