html – 在Safari中无法渲染最大宽度

概述请 check this fiddle 这就是它在Firefox和Chrome中的外观……这是我原来的布局. 这就是它在Safari中的外观,我想解决它.任何帮助,将不胜感激. .top { background: #edebe6; height: 80px;}.intop { max-width: 1080px; margin: 0 auto; di 请 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,-moz-transform 0.3s;    Transition: height 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;}}

解决方法 从.logo img中删除display：table-cell,这应该可以解决所有浏览器上的所有问题. 总结

以上是内存溢出为你收集整理的html – 在Safari中无法渲染最大宽度全部内容，希望文章能够帮你解决html – 在Safari中无法渲染最大宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。