在Safari中无法渲染最大宽度

Question

请check this fiddle

这就是它在Firefox和Chrome中的外观..这是我原来的布局。

这就是它在Safari中的表现，我想解决它。任何帮助将不胜感激。

.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;
}

}

Answer 1

从.logo img中删除display：table-cell，这应该可以修复所有浏览器上的所有问题。