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

所以我通过改变布局来解决这个问题——而不是在翻转时覆盖表格的“.titles”，iphone版本总是作为“.griditem”的页脚出现——本身不是修复，更多的是一种解决方法但它有效并且看起来仍然不错，所以现在我会接受它！

这是 iPhone CSS 中“.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 回答
0

是否有任何使用的具体原因：尝试摆脱这一行，因为您已经在标签中
<img src="spacer.png" width="100%" href="video.php" alt="Title" />
指定了 HREF 。为元素 添加样式。<a>
display:block<a>

谢谢，帕夫

于 2013-01-02T13:50:52.900 回答