0

サイトのレイアウトを変更したばかりですが、いくつか問題があります。iPhone用のスタイルシートがあり、次のように選択しています。

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="scripts/page-phone.css" />

iPhoneでいくつかのリンクにアクセスする際に問題が発生しました-不正なCSSが原因だと思いますが、追跡に少し問題があります-通常のCSSでは次のコードがあります：

.griditem {
    position: relative;
    display:inline-block;
    margin-right: 17px;
    margin-bottom: 17px;
    background-color: #777;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 480px;
    height: 271px;
    text-align: left;
}


.titles {
    padding: 0px;
    bottom: 0px;
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    -moz-border-radius: 1px 1px 0 0;
    border-radius: 1px 1px 0 0;
    text-align: center;
    display: none;
    background: rgba(0, 0, 0, 0.5);
    -moz-border-radius: 1px 1px 0 0;
    border-radius: 1px 1px 0 0;
    vertical-align: middle;
}

.griditem:hover .titles {
    display:  block;
    text-decoration: none;
}

.titles a:link {
    text-decoration: none;
}​

そして私の「電話」CSSで-

.griditem {
    position: relative;
    display:inline-block;
    margin-right: 17px;
    margin-bottom: 17px;
    background-color: #777;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 480px;
    height: 271px;
    text-align: left;
}


.titles {
    padding: 5px;
    position: absolute;
    bottom: 0px;
    left: -1px;
    right: -1px;
    background: transparent url(../images/layout/white80.png) top left;
    -moz-border-radius: 1px 1px 0 0;
    border-radius: 1px 1px 0 0;
    text-align: left;
}

.titles a:link {
    text-decoration: none;
}

HTMLは次のとおりです。

<a class="griditem" href="video.php" style="background-image:url(image.jpg); background-size:100% 100%;">
    <img src="spacer.png" width="100%" href="video.php" alt="Title" />
    <div class="titles">
        <div class="gridholder">
            <h5>Title</h5>
            <h6>Subtitle<BR>+</h6>
        </div>
    </div>
</a>

どういうわけか、電話ではリンクが機能しません（！）-私は明白なものを見ることができないこの問題を見てきました-コードを見ることから何かアイデアはありますか？

4

2 に答える 2

0

使用する特定の理由はありますか：タグ
<img src="spacer.png" width="100%" href="video.php" alt="Title" />
ですでにHREFが指定されているため、この行を削除してみてください<a>。要素のスタイルを
追加します。display:block<a>

ありがとう、Pav

于 2013-01-02T13:50:52.900 に答える
0

だから私はレイアウトを変更することでこれを回避しました-ロールオーバーでテーブルをカバーする「.titles」の代わりに、iphoneバージョンは常に「.griditem」のフッターとして存在します-それ自体は修正ではなく、より多くの回避策ですしかし、それは機能し、それでも見栄えが良いので、今のところ私はそれを取ります！

iPhoneCSSの「.titles」の新しいCSSは次のとおりです。

.titles {
    padding: 5px;
    position: absolute;
    display: block;
    bottom: 0px;
    top: 75%;
    left: -1px;
    right: -1px;
    background: rgba(0, 0, 0, 0.5);
    -moz-border-radius: 1px 1px 0 0;
    border-radius: 1px 1px 0 0;
    text-align: left;
}
于 2013-01-02T15:54:36.823 に答える