css - iPad 特定的 CSS Div 问题

Question

我有一个关于我们测试站点上的 div 的问题，只有在 iPad 上查看时(或者，我猜是平板电脑大小的屏幕)...

http://jmldirect.uat.venda.com

加入我们(社交图标)//时事通讯栏从主包装中渗出，我不知道为什么。

这是 HTML 和相关的 CSS:

HTML:

<div id="socialfooter">
<ul class="getSocial">
    <li><a class="join-us">JOIN US</a></li>
    <li><a class="foot-fb" href="https://www.facebook.com/JMLDirect" target="_blank" alt="JML on Facebook"></a></li>  
    <li><a class="foot-tw" href="https://twitter.com/JML_Direct" target="_blank" alt="JML on Twitter"></a></li>
    <li><a class="foot-yt" href="http://www.youtube.com/user/JMLdirect" target="_blank" alt="JMl's YouTube Channel"></a></li>
</ul>


<ul class="newsletter">
<li><label for="emailsignup"><a class="join-us">SIGN UP TO OUR NEWSLETTER</a></label></li>
<li><form></form></li>
</ul>
</div>

CSS:

#socialfooter {
    background: url("../images/social_icons/social_footer_wrapper_1010.png") no-repeat scroll 0 0 transparent;
    clear: both;
    display: block;
    height: 55px;
    margin: 0 auto;
    width: 1010px;
}

#socialfooter ul.getSocial {
    display: inline;
    float: left;
    list-style-type: none;
    margin: 7px 0 0 46px;
    width: 192px;
}

#socialfooter ul.newsletter {
    display: inline;
    float: right;
    height: 38px;
    list-style-type: none;
    padding: 7px 11px 9px 0;
    width: 564px;
}

Answer 1

你已经在父 div 上设置了一个宽度:

#socialfooter{ width:1010px;}

然后将时事通讯 ul float 到该 div 的右侧:

#socialfooter ul.newsletter{float:right; width:564px;}

问题是 iPad 没有分辨率来显示这么宽的 div (#socialfooter)。

如果您希望显示内容，请使用基于百分比的宽度，如下所示:

#socialfooter {
    background: url("../images/social_icons/social_footer_wrapper_1010.png") no-repeat scroll 0 0 transparent;
    clear: both;
    display: block;
    height: 55px;
    margin: 0 auto;
    width: 100%;
}

#socialfooter ul.getSocial {
    display:inline-block;
    box-sizing: border-box;
    float:left;
    list-style-type:none;
    margin:.5em 0 0 2em;
    width:50%;
}

#socialfoter ul.newsletter {
    display: inline-block;
    box-sizing: border-box;
    float:right;
    vertical-align: middle;
    list-style-type: none;
    padding:0 2em 0 0;
    width:50%;
}

编辑:

#socialfooter {
    background: url("../images/social_icons/social_footer_wrapper_1010.png") no-repeat scroll 0 0 transparent; // 

^ 这个背景导致了这个问题。这是一张设置为 1010 像素的图像，因此即使 CSS 也无法帮助您。

    clear: both;
    display: block;
    height: 55px;
    margin: 0 auto;
    width: 100%;
}

#socialfooter ul.getSocial {
    display:inline-block;
    box-sizing: border-box;
    float:left;
    list-style-type:none;
    margin:.5em 0 0 2em;
    width:30%;
}

^ 更改了宽度以适应右侧的大输入字段

#socialfoter ul.newsletter {
    display: inline-block;
    box-sizing: border-box;
    float:right;
    vertical-align: middle;
    list-style-type: none;
    padding:0 2em 0 0;
    width:70%;
}

^ 并增加了右侧的宽度，以便为您的输入腾出空间。