Проблемы с зависанием на iPhone/iPad

Я только что изменил макет своего сайта, и у меня возникло несколько проблем - у меня есть таблица стилей для 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>

По какой-то причине, хотя по телефону ссылки не работают (!) - я смотрел на эту проблему, что я не вижу очевидного - Есть идеи от просмотра кода?

Источник

2 ответа

Решение

Поэтому я решил эту проблему, изменив макет - вместо ".titles", покрывающего таблицу при переносе, версия iphone всегда присутствует в качестве нижнего колонтитула в ".griditem" - само по себе это не исправление, а скорее обходной путь но это работает и все еще выглядит хорошо, так что пока я возьму это!

Вот новый CSS для.titles в CSS для iPhone:

.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;
}
Источник

Есть ли конкретная причина для использования:
<img src="spacer.png" width="100%" href="video.php" alt="Title" />
Попробуйте избавиться от этой строки, так как у вас уже есть HREF, указанный в <a> тег.
Добавить стиль display:block для <a> элемент.

Спасибо пав

Источник
Другие вопросы по тегам