我有一个用Bootstrap 3构建的simple landing page

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

在iOS设备(经过iPhone 4S和iPad Air测试)上,列表垂直显示(行为异常,请参见下图),



而在所有其他浏览器中(在Samsung手机上测试),该列表水平显示,没有样式(期望的行为,请参见图片)



的HTML

 <body class="nomobile">

        <!-- START HEADER -->
        <section id="header">
            <div class="container">
                <header>
                    <!-- HEADLINE -->
                    <h1 data-animated="FadeIn"><b>Simone Duca</b></h1>
                    <h2>web developer and designer</h2>
                </header>
                <!-- START TIMER -->
                <div id="timer" data-animated="FadeIn">
                    <p id="message"></p>
                    <div id="days" class="timer_box"></div>
                    <div id="hours" class="timer_box"></div>
                    <div id="minutes" class="timer_box"></div>
                    <div id="seconds" class="timer_box"></div>
                </div>
                <!-- END TIMER -->
                <div class="footer">
                    <div class="row">
                        <div class="col-sm-12 align-center">
                            <ul class="social-network social-circle">
                                <li><a href="https://uk.linkedin.com/in/simoneduca" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
                                <li><a href="https://twitter.com/fluidprism" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="mailto:info@simoneduca.com" class="icoEmail" title="Email"><i class="fa fa-envelope"></i></a></li>
                                <li><a href="http://fluidprism.blogspot.co.uk/" class="icoBlogger" title="Blog"><i class="fa fa-rocket"></i></a></li>
                                <li><a href="http://stackoverflow.com/users/2794702/u-r-s-u-s" class="icoStack" title="Stackoverflow"><i class="fa fa-stack-overflow"></i></a></li>
                                <li><a href="https://github.com/simoneduca" class="icoGithub" title="GitHub"><i class="fa fa-github"></i></a></li>

                            </ul>
                        </div>
                    </div>

                    <div class="row align-center copyright">
                        <div class="col-sm-12">
                            <p>&copy;
                                <script type="text/javascript"> var now = new Date(); var currentYear = now.getFullYear(); document.write(currentYear);</script>
                                Simone Duca</p>
                        </div>
                    </div>
                </div>

            </div>
            <!-- LAYER OVER THE SLIDER TO MAKE THE WHITE TEXTE READABLE -->
            <div id="layer"></div>
            <!-- END LAYER -->
            <!-- START SLIDER -->
            <div id="slider" class="rev_slider">
                <ul>
                    <li data-transition="slideleft" data-slotamount="1" data-thumb="assets/img/slider/1.jpg">
                        <img src="assets/img/slider/1-1.jpg">
                    </li>
                    <li data-transition="slideleft" data-slotamount="1" data-thumb="assets/img/slider/2.jpg">
                        <img src="assets/img/slider/bark.jpg">
                    </li>
                    <li data-transition="slideleft" data-slotamount="1" data-thumb="assets/img/slider/3.jpg">
                        <img src="assets/img/slider/3.jpg">
                    </li>
                    <li data-transition="slideleft" data-slotamount="1" data-thumb="assets/img/slider/4.jpg">
                        <img src="assets/img/slider/4-4.jpg">
                    </li>
                </ul>
            </div>
            <!-- END SLIDER -->
        </section>

        <!-- END HEADER -->

        <!-- Bootstrap core JavaScript
    ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="assets/js/jquery.min.js"></script>
        <script type="text/javascript" src="assets/js/modernizr.custom.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/soon/plugins.js"></script>
        <script src="assets/js/soon/jquery.themepunch.revolution.min.js"></script>
        <script src="assets/js/soon/custom.js"></script>
    </body>


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: nonelist-style-type: none,但这没有帮助。

我可以用一双新鲜的眼睛看我想念的东西。

最佳答案

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


  [警告]无效的CSS属性声明位于:{(soon.css,第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。删除那些多余的;应该可以解决您的问题。

07-24 09:44
查看更多