display：none;在android

Question

我创建了一个可切换的“单个图像与文本”列表，我只希望活动可见。所有工作都适用于PC浏览器（试过Firefox，IE），但在移动版的ANDROID浏览器（Chrome）上，我只能看到第一个“可见”图像，而其余部分只能显示文本。

HTML：

<ul class="tabs clearfix">
    <li class="active"></li>
    <li></li>
    <li></li>
</ul><!-- tabs -->

<div class="box visible">
    <div class="box-text">
        <h3>Title</h3>
        <p>Text.</p>
    </div>
    <img src="images/pic1.png" width="437" height="545" alt="">
</div><!-- box -->

<div class="box">
    <div class="box-text">
        <h3>Title</h3>
        <p>Text.</p>
    </div>
    <img src="images/pic2.png" width="437" height="545" alt="">
</div><!-- box -->

<div class="box">
    <div class="box-text">
        <h3>Title</h3>
        <p>Text.</p>
    </div>
    <img src="images/pic3.png" width="437" height="545" alt="">
</div><!-- box -->

的CSS：

.tabs li {
    width: 20px;
    height: 20px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    float: left;
    background-color: #cbcfd1;
    margin: 0 13px 13px 0;
    -moz-transition: background-color 0.15s linear;
    -o-transition: background-color 0.15s linear;
    -webkit-transition: background-color 0.15s linear;
    transition: background-color 0.15s linear;
    cursor: pointer;
}
.tabs li:hover {
    background-color: #8bcb9d;
}
.tab li.active {
    cursor: default;
    background-color: #35a654;
}
.box {
    display: none;
    line-height: 30px;
}
.box.visible {
    display: block;
    line-height: 30px;
}

我从我在此处发现的内容中了解到移动Chrome存在某种问题，但由于我是初学者，因此我不能用它做出正确或反应，以使其成功。有人可以帮忙吗？当我删除display：none;并且将块放在那里，可以看到所有图像彼此堆叠在一起，但这是不可取的。

我发现问题只发生在手机大小的设备上。我试过的Galaxy Tab 2平板显示一切正常。