最大幅はサファリ

でのレンダリングではないしてくださいcheck this fiddle 最大幅はサファリ

これはどのように私の元のレイアウトでFirefoxとChromeでその表情...。それは私が解決したいのSafariに見えるその方法

enter image description here

そして、これ。どんな助けもありがとう。

enter image description here

.top { 
    background: #edebe6; 
    height: 80px; 
} 
.intop { 

    max-width: 1080px; 
    margin: 0 auto; 
    display: table; 
    width: 100%; 
} 
.logo { 
    width: 20%; 
    float: left; 

} 
.logo img { 
    display: table-cell; 
    vertical-align: middle; 
    margin-top: 15px; 
} 
.svg-menu { 
    display: none; 
} 
.nav-wrap { 
    width: 68%; 
    float: left; 
    height: 80px; 
    display: table; 
} 
ul.nav { 
    list-style: none; 
    float: right; 
    margin-top: 23px; 
    margin-right: 45px; 

} 
ul.nav li { 
    display: inline-block; 
    margin-left: 35px; 
    text-transform: uppercase; 
    font-size: 12px; 
    font-weight: bold; 
} 
ul.nav li a { 
    color: #403b33; 
} 
ul.nav li a:hover { 
    background: none; 
    color: #d3643b; 
} 

ul.nav li.current-menu-item a { 
    color: #d3643b; 
    position: relative; 
} 
ul.nav li a::after { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 60%; 
    height: 1px; 
    background: #d3643b; 
    content: ''; 
    opacity: 0; 
    -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; 
    -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; 
    transition: height 0.3s, opacity 0.3s, transform 0.3s; 
    -webkit-transform: translateY(-10px); 
    -moz-transform: translateY(-10px); 
    transform: translateY(-10px); 
} 
ul.nav li a:hover::after, 
ul.nav li a:focus::after { 
    height: 2px; 
    opacity: 1; 
    -webkit-transform: translateY(0px); 
    -moz-transform: translateY(0px); 
    transform: translateY(0px); 
} 
ul.nav li.current-menu-item a:after { 
    content: ''; 
    height: 2px; 
    width: 60%; 
    background: #d3643b; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 
.top-cart { 
    width: 12%; 
    float: left; 
    height: 80px; 
    display: table; 
    text-align: right; 
    padding-right: 18px; 
    background: #83b4a4 url(images/cart.png) no-repeat 20px center; 
} 
.top-cart a { 
    vertical-align: middle; 
    display: table-cell; 
    color: #fff; 
    text-transform: uppercase; 
    font-size: 14px; 
    text-transform: uppercase; 
    font-weight: bold; 
    color: #fff; 
} 


@media only screen and (max-width: 1080px) { 
    .in-fea-home, #container, .logo { 
     padding-left: 20px; 
     padding-right: 20px; 
    }  
    .top-cart { 
     width: 65px; 
     float: right; 
     position: absolute; 
     right: 0; 
     padding: 0; 
    } 
    .top-cart a { 
     margin-right: -25px; 
     padding-right: 27px; 
     padding-top: 14px; 
    }.rhide { 

     display: none; 
    } 
} 
@media only screen and (max-width: 767px) { 

    .nav-wrap { 

     display: none; 
    } 

    .logo { 
     width: 100%; 
     text-align: center; 
    } 

    .svg-menu { 
     display: block; 
     width: 20%; 
     float: left; 
     position: absolute; 
     left: 15px; 
     padding-top: 27px; 
    } 
    .footer { 

     text-align: center; 
    } 
    #container ul.products li { 
    width: 70%; 
    margin: 0 auto; 
} 
.ff, .gff { 
    margin-bottom: 55px; 
} 
} 

@media only screen and (max-width: 534px) { 


} 


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 
@media only screen and (max-width: 479px) { 
    button.single_add_to_cart_button { 
    background: #83b4a4; 
    border: none; 
    border-radius: 3px; 
    padding: 10px 17px; 
    padding-bottom: 9px; 
    font-size: 13px; 
    text-transform: uppercase; 
    color: #fff; 
    margin-left: 15px; 
    font-weight: bold; 
    display: block; 
    float: left; 
    margin-left: -120px; 
    margin-top: 50px; 
} 

}

出典

2013-12-20 Vikas Ghodke

私はなぜ知っているのですか？問題はわかっていますが、クロームでも私のために来ています。 –

テーブルを取り除いてください：.logoのテーブルセルimg –