Question

我真的花了好几个小时才解决这个问题。我接管了这个网站，并且已经设置了CSS，除了一些布局问题。本网站上使用的唯一精灵用于主页和电子邮件链接。电话号码应显示在主页和电子邮件图标上方，而不是IN图标。这是HTML：

<div class="box agencies">
  {{ for letter,list in agencies }}
<div class="item">
    <h2><a href="#" class="btn">{$letter}</a></h2>
</div>

<div class="index">
    {{for agency in list }}
          <div class="innerbox">
    <div class="info">
    {{if agency.phone }}
              <strong>{$agency.phone}</strong>
            {{ endif }}
            <ul>
    {{if agency.website }}
              <li class="item2"><a href="{$agency.website}" target="_blank"></a></li>
            {{ endif }}

            {{if agency.email }}
              <li class="item1"><a href="mailto:{$agency.email}"></a></li>
            {{ endif }}
            </ul>
          </div><!-- INFO -->

          <h3>{$agency.name}</h3>
          <p>{$agency.tagline}</p>
          <a href="#" class="view" data-collapse="{$agency.id}" data-state="0">
            VIEW GIRLS &darr;
          </a>

         <div class="gallery" data-collapsible="{$agency.id}">
           <ul>
           {{ for girl in agency.girls }}
             <li>
               <a href="girls/profile?id={$girl.id}">
               <img src="{$girl.thumb}" style="width:74px;" alt="" /></a>
             </li>
           {{ endfor }}
           </ul>
         </div><!-- GALLERY -->
        </div><!-- INNERBOX -->
        {{ endfor }}
        <div class="clear"></div><!-- CLEAR -->
    </div><!-- INDEX -->
    {{ endfor }}
  </div><!-- BOX -->

这是CSS：

div#content div.innerbox h3 {
    margin-bottom:0;
    color:#1d1c1c;
    font-size:14px;
    font-weight:normal;
}
div#content div.innerbox div.info {
    width:120px;
    float:right;
}
div#content div.innerbox div.info strong {
    margin-bottom:5px;
    text-align:right;
    display:block;
    color:#373737;
    font-size:12px;
}
div#content div.innerbox div.info ul {
    overflow:hidden;
    zoom:1;
}
div#content div.innerbox div.info li {
    margin-left:5px;
    float:right;
}
div#content div.innerbox div.info a {
    width:31px;
    height:32px;
    display:block;
    overflow:hidden;
    background:url(../images/sprites-contact.gif) no-repeat left top;
}
div#content div.innerbox div.info li.item1 a {
    background-position:-37px 0;
}
div#content div.innerbox div.info li.item1 a:hover {
    background-position:-37px -34px;
}
div#content div.innerbox div.info li.item2 a:hover {
    background-position:0 -34px;
}

我没有用过很多CSS，而且这个让我难过。任何帮助将不胜感激！

Answer 1

如果我理解了这个问题（花了我一段时间来解决这个问题）是你的电话号码被设计为锚标签的问题，因此接受精灵？

如果是这样，这是一个＆＃39;功能＆＃39;在移动野生动物园。如果它看到的东西看起来像电话号码，它会自动使其成为用户选择的链接。

在这样做时，它会拾取您用于其他锚点的样式，并因此使用精灵。

更多信息：How to disable phone number linking in Mobile Safari?

我建议的是您的课程和选择器更具体，所以它不包括电话号码。

所以在你的CSS中：

div#content div.innerbox div.info a {sprint styles...}

将其更改为：

div#content div.innerbox div.info ul a {sprint styles...}

由于电话号码在特定的UL之外，因此它不会接受这种风格。

一些快速提示：

上面有点冗长。在大多数情况下，没有必要写出标签。考虑将其缩短为：#content .innerbox .info ul a {sprint styles...}您也可以删除其中的几个选择器，但这实际上取决于您的CSS和HTML以及哪些适合您。
在发布JSfiddle时，尽可能尝试发布问题标记。要求用户处理2000多行CSS文件在某些情况下要求很多。：）

CSS Image sprite在iPhone / iPad上无法正常显示

1 个答案: