我有一个使用 Bootstrap 3 构建的简单登录页面。
我的问题是页脚。特别是社交媒体链接列表。
在 iOS 设备上(在 iPhone 4S 和 iPad Air 上测试),列表垂直显示(不希望的行为),而在所有其他浏览器中(在三星手机上测试)列表水平显示且没有样式(期望的行为)
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
但它没有帮助。
我可以用一双新鲜的眼睛看看我错过了什么。
最佳答案
您的问题不仅限于 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。删除那些额外的 ;
应该可以解决您的问题。
关于html - iOS 上的列表问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28398615/