0

私はこのサイトhttp://northshorelandscapefirm.ca/を持っていますが、iPhoneを除いて、すべてのブラウザで問題なく表示されます...フッターの幅はWebブラウザよりも短いです....誰かが私が話していることを知っていますか？

これが私のコードです

<div class="footerWrapper">
<div class="footer">

<div class="footerNav">
<ul>
<li><a href="home.php">Home</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="gallery.php">Gallery</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</div><!--footerNav-->

<div class="footerContact">
<ul>
<li>Email - <span style="text-transform:lowercase"><a href="mailto:email@northshorelandscapefirm.ca">email@northshorelandscapefirm.ca</a> | <a href="mailto:email2@northshorelandscapefirm.ca">email2@northshorelandscapefirm.ca</a></span></li>
<li> | </li>
<li>PHONE - <a href="callto:+5555555555">555.555.5555</a> | <a href="callto:+5555555555">555.555.5555</a></li>
</ul>
</div><!--footerContact-->

とCSS

.footerWrapper{
    width:100%;
    background:#000;
    float:left;
    padding-bottom:20px;
}

.footerNav{
    padding-top:10px;
    margin: 0 auto;
    position: relative;
    width:1080px;
    z-index:1000;
}

.footerNav ul {
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 8px;
}

.footerNav li {
    float: left;
}

.footerNav ul a {
    color: #FFFFFF;
    display: block;
    padding: 0 30px 0 0;
    text-decoration: none;
    font-size:36px;
    text-transform:uppercase;
}

.footer{
    margin: 0 auto;
    position: relative;
    width: 1101px;
    background-color:#888888;
    min-height:145px;
    opacity:0.44;
    filter:alpha(opacity=44);
}

.footerContact{
    margin: 0 auto;
    position: relative;
    width: 1200px;
    padding-top: 108px;
}

.footerContact ul {
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 8px;
}

.footerContact li {
    float: left;
    color: #FFFFFF;
    display: block;
    padding: 0 30px 0 0;
    text-decoration: none;
    font-size:20px;
    text-transform:uppercase;
}

.footerContact Ul a{
    text-decoration:none;
    color:#FFFFFF;
}

そのたくさんのコード、私は知っていますが、誰かがそれを助けることができればそれは大いにありがたいです、

よろしくお願いします、J

4

1 に答える 1

0

Tony318の回答のフォローアップです。次のようなものを使用できます。

if (window.navigator.userAgent.indexOf('iPhone') != -1) {
    //iphone specific code to resize footer
}
于 2013-02-28T11:51:22.380 に答える