Float left 在 ipod、android 智能手机等移动设备中不起作用

Posted 2023-03-08

【中文标题】Float left 在 ipod、android 智能手机等移动设备中不起作用

【英文标题】：Float left not working in mobile devices like ipod, android smartphones

【发布时间】：2012-11-02 07:37:19

【问题描述】：

浮动左侧“li”在 ipod、android 设备中不起作用。但它在笔记本电脑/台式机的所有主要浏览器中都能完美运行。代码在这里：

<ul class="clsvideos clearfix">
<li>
    <div class="home-thumb">
        <div class="home-play-container">
            <div class="play-button-hover">
                <div class="movie-entry yt-uix-hovercard">
                    <div class="tooltip">
                        <a href="/index.php/component/deentube/player/Education-Travel/Abdul-Basit-reciting-Surah-Infitar" class="info_hover"><img class="yt-uix-hovercard-target" src="http://img.youtube.com/vi/pF6Yq7DrJKA/1.jpg" border="0"   title=""> </a>
                        <div class="Tooltipwindow clearfix">
                            <img src="http://video.muslimbackyard.com/templates/videoplus/images/tip.png" class="tipimage">
                            <div class="clearfix"><span class="clstoolleft">Category : </span><span class="clstoolright">Education &amp; Travel</span></div>

                            <span class="clsdescription">Description : </span><p>Abdul Basit reciting Surah Infitar - amazing tajweed! mash'Allah!</p><div class="clearfix"> <span class="clstoolleft">Rating : </span>                                                                    <div class="clstoolright ratingvalue ratethis1 fivepos1"></div>                                                            
                                <div class="clearfix"><span class="clstoolleft"> Views:</span>                                                                        <span class="clstoolright">58                                                                        </span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="show-title-container">
                <a href="/index.php/component/deentube/player/Education-Travel/Abdul-Basit-reciting-Surah-Infitar" class="show-title-gray info_hover">Abdul Basit reciting Surah Infitar </a>
            </div>
            <span class="video-info">  <a href="/index.php/component/deentube/category/Education-Travel">Education &amp; Travel                                                                    </a> </span>
            <div class="video-info clearfix">
                <div class="clsratingvalue"><span class="ratethis1 fivepos1 "></span></div>
                <div class="clsvideosviews">58 Views</div>
            </div>
        </div>
    </div></li>
<li>
    <div class="home-thumb">
        <div class="home-play-container">
            <div class="play-button-hover">
                <div class="movie-entry yt-uix-hovercard">
                    <div class="tooltip">
                        <a href="/index.php/component/deentube/player/Sports-Gaming/How-the-Bible-Led-Me-to-Islam-The-Story-of-a-Former-Christian-Youth-Minister-Joshua-Evans" class="info_hover"><img class="yt-uix-hovercard-target" src="http://img.youtube.com/vi/IYMKQKSV0bY/1.jpg" border="0"   title=""> </a>
                        <div class="Tooltipwindow clearfix">
                            <img src="http://video.muslimbackyard.com/templates/videoplus/images/tip.png" class="tipimage">
                            <div class="clearfix"><span class="clstoolleft">Category : </span><span class="clstoolright">Sports &amp; Gaming</span></div>
                            <span class="clsdescription">Description : </span><p>How the Bible Led Me to Islam: The Story of a Former Christian Youth Minister - Joshua Evans</p><div class="clearfix"> <span class="clstoolleft">Rating : </span>                                                                    <div class="clstoolright ratingvalue ratethis1 fourpos1"></div>                                                            
                                <div class="clearfix"><span class="clstoolleft"> Views:</span>                                                                        <span class="clstoolright">41                                                                        </span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="show-title-container">
                <a href="/index.php/component/deentube/player/Sports-Gaming/How-the-Bible-Led-Me-to-Islam-The-Story-of-a-Former-Christian-Youth-Minister-Joshua-Evans" class="show-title-gray info_hover">How the Bible Led Me to Islam: The ... </a>
            </div>
            <span class="video-info">  <a href="/index.php/component/deentube/category/Sports-Gaming">Sports &amp; Gaming                                                                    </a> </span>
            <div class="video-info clearfix">
                <div class="clsratingvalue"><span class="ratethis1 fourpos1 "></span></div>
                <div class="clsvideosviews">41 Views</div>
            </div>

        </div>
    </div></li>

对应的CSS是：

.clsvideos li:first-child 
width: 140px;
float: left;
padding: 14px 10px 0 0;
display: block;

.clsvideos li 
height: 155px;
width: 140px;
padding: 14px 10px 0 9px;
border-right: 1px dotted #CFCFCF;
border-bottom: 1px dotted #CFCFCF;
float: left;

直播网址：http://video.muslimbackyard.com/

注意：在智能手机中打开网站并停止。请注意热门视频、最近视频部分的设计问题。你会知道问题出在哪里。

等待最早的解决方案

【问题讨论】：

在我的 LG P500 上看起来不错...dropbox.com/s/tx6jcj27v6t36kv/2012-11-02%2012.31.06.png

另外，您正在复制一些 CSS 规则。 width 和 float 规则只需要在 .clsvideos li 选择器中声明即可。

谢谢@decastro。实际上问题是，开发人员没有关闭“li”中的最后一个“div”，这导致了这个错误......

【参考方案1】：

其实问题是，开发者没有关闭 'li' 中的最后一个 'div' 导致这个 bug...

“所以在编写核心 php 时要小心前端代码”。这就是我对开发人员的建议。