iOS 上的列表问题

Question

我有一个使用 Bootstrap 3.

构建的简单登录页面

我的问题与页脚有关。特别是社交媒体链接列表。

在 iOS 设备上（在 iPhone 4S 和 iPad Air 上测试），列表垂直显示（不良行为），而在所有其他浏览器中（在三星 [上测试） =32=]) 列表水平显示且没有样式（期望的行为）

CSS（相关位）

/*=========================
  Footer
 ================= */

.footer {
    margin-top:50px;
    display:block;
}
    .footer p {
        font-size: 14px;
margin-top: 10px;

    }
/*section#footer {
    background: #242424;
    margin: 0;
}

section#footer .copyright {
    text-align: center;
}*/

/* footer social icons */
ul.social-network {
    list-style: none !important;
    list-style-type: none !important;
    display: inline;
    margin-left:0 !important;
    padding: 0;
}
ul.social-network li {
    display: inline;
    margin: 0 5px;
}

/* footer menu */
ul.footer-menu {
    list-style: none !important;
    list-style-type: none !important;
    display: inline;
    margin-left:0 !important;
    padding: 0;
}
ul.footer-menu li {
    display: inline;
    margin: 0 5px;
}


/* footer social icons */
.social-network a.icoStack:hover {
    background-color: #ffa500;
}
.social-network a.icoFacebook:hover {
    background-color:#3B5998;
}
.social-network a.icoTwitter:hover {
    background-color:#33ccff;
}
.social-network a.icoEmail:hover {
    background-color:#BD3518;
}
.social-network a.icoBlogger:hover {
    background-color:#fb8f3d;
}
.social-network a.icoLinkedin:hover {
    background-color:#007bb7;
}

.social-network a.icoGithub:hover {
    background-color:#60b044;
}

.social-network a.icoStack:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i, 
.social-network a.icoEmail:hover i, .social-network a.icoBlogger:hover i, .social-network a.icoLinkedin:hover i, .social-network a.icoGithub:hover i {
    color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
    color:#44BCDD;
}

我已将 !important 添加到 list-style: none 和 list-style-type: none，但没有帮助。

我可以用一双新鲜的眼睛看看我错过了什么。

Answer 1

您的问题不仅限于 iOS Safari，它还会影响桌面 Safari。 Safari 开发人员控制台提供了有关问题所在的提示。

[Warning] Invalid CSS property declaration at: { (soon.css, line 412)

在那个一般区域，我们在 CSS 中发现了一些语法错误。似乎其他浏览器在错误处理无效 CSS 方面做得更好，但 Safari 被绊倒了，下面的 CSS 规则被删除了。

问题CSS:

@-webkit-keyframes InfiniteTurn {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }

    ;
}

@-moz-keyframes InfiniteTurn {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }

    ;
}

@-o-keyframes InfiniteTurn {
    0% {
        -o-transform: rotate(0deg);
    }

    100% {
        -o-transform: rotate(360deg);
    }

    ;
}

@-keyframes InfiniteTurn {
    0%;

{
    transform: rotate(0deg);
}

100% {
    transform: rotate(360deg);
}

;
}

有一些额外的 ; 字符。您不需要以分号结束 keyframes 声明，但致命字符在此部分。

@-keyframes InfiniteTurn {
    0%;

{
    transform: rotate(0deg);
}

0%; 中的额外分号似乎破坏了 Safari 中的 CSS。删除那些多余的 ; 应该可以解决您的问题。

iOS 上的列表问题

List issue on iOS

html

css

mobile

ios

twitter-bootstrap

问题CSS: