【发布时间】：2018-11-07 01:37:57
【问题描述】：
我遇到了一个令我困惑的问题。我有一个电话：嵌入的链接。它工作得很好，直到我分配一个使用媒体查询的类或 ID（两者都试过）以在某个屏幕宽度上应用 {display: none;} 。一旦应用了类/ID，tel: 普通链接在任何宽度下都不起作用。 任何帮助将不胜感激。
@media screen and (min-width: 414px){
#call-now{ display: none; }
}<div class="pull-left" id="call-now" style="margin-left: 30%; padding-top: 12px">
<a href="tel:1555444333" style="color: #1b95e0; text-shadow: 1px 1px 1px #ababab; font-family: 'Rubik', sans-serif; font-size: 25px">CALL NOW</a>
</div>【问题讨论】：
-
不，我明确地说要在浏览器超过 414 像素时隐藏元素。它确实如此。但是，当应用该类时，当元素存在时，tel: 链接不再是可点击的。但是 tel: 链接在不应用 ID 时工作正常（是的，它总是可见的，我只是作为一个控件这样做以确保它没有其他影响它的东西。）
-
那么类在哪里，id在哪里呢？ div上的id是否导致问题？你的 sn-p 似乎工作正常。
-
我正在使用 ID“call-now”，它位于 所在的如果它不可点击，那么其他元素就在它上面！右键单击锚点，然后在浏览器检查器中检查元素。我希望是这样 :( 。我使用检查器工具生死攸关，我去的第一件事就是。 显示它在文本所在的位置。就像我说的那样好吧，当我删除#call-now id 时，“CALL NOW”文本是可点击的。当我重新输入它时，文本是不可点击的。所以唯一的冲突似乎是 tel: 被调用的 id 否定了媒体查询。