Question

我有一块似乎没有工作的CSS，我不知道为什么。 - 我正在使用Dreamweaver CC和多个浏览器，结果是一样的。

HTML

<div class="requirements-bulletdetail hide-desktop-wide show-desktop hide-tablet hide-phone" id="left_SubPanel_Training"
    style="display:none;">
    Each MOT tester must complete a minimum of 3hrs (180 mins) of training as per the cirruculum set down by the DVSA each year.
    It's important to note that if an MOT tester is dual class (Classes 1 &amp; 2 (GROUP A) AND Classes 3 to 7 GROUP B) then
    that tester MUST complete a minimum of 3hrs (180 mins) for EACH class group.
    <a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a>
</div>

<!-- DESKTOP WIDE-->
<div class="requirements-bulletdetail hide-desktop-wide hide-desktop hide-tablet hide-phone" id="left_SubPanel_Training"
    style="display:none;">
    Each MOT tester must complete a minimum of 3hrs (180 mins) of training <br/>as per the cirruculum set down by the DVSA
    each year. It's important to note that if an MOT tester is dual class (Classes 1 &amp; 2 (GROUP A) AND Classes 3 to 7
    GROUP B) then that tester MUST complete a minimum of 3hrs (180 mins) for EACH <br/>class group.
    <a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a>
</div>

CSS

.hide-desktop {
    display: none;
}

.show-desktop {
    display: inline-block;
}

@media (min-width: 960px) and (max-width:1199px) {
    .hide-desktop-wide {
        display: none;
    }
    .show-desktop-wide {
        display: inline-block;
    }
}

问题是即使我在这两个部分都有这个代码： -

<a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a>

它不会在任何浏览器宽度显示 - 并且...我必须保持ID与我的Javascript引用它相同。（无论如何，我在页面上有其他代码元素，副本ID名称可以正常工作。

非常感谢任何帮助/想法。

由于

Answer 1

我建议使用它来更改样式，而不是使用媒体查询来隐藏和显示特定元素。

div元素类的差异是：

默认

隐藏桌面宽

显示的桌面

hide-tablet hide-phone

<强>桌面

隐藏桌面宽

隐藏的桌面

隐藏片剂

隐藏电话

您应该将这些样式移到媒体查询中：

@media (min-width: 960px) and (max-width:1199px) { //hide desktop-wide, hide-desktop, hide-table, hide-phone styles here }

这将删除HTML中的重复代码，并允许纯粹通过CSS控制样式。

Answer 2

由于您的!important已内联，因此您在CSS中缺少display: none。

你的CSS必须是这样的：

.hide-desktop {
    display:none !important;
}

.show-desktop {
    display:inline-block !important;
}


@media (min-width: 960px) and (max-width:1199px) {

    .hide-desktop-wide {
        display:none !important;
    }

    .show-desktop-wide {
        display:inline-block !important;
    }

}

Answer 3

DOH！

我找到了解决方案！

愚蠢是我最好的技能之一！

CSS @Media无法正常工作

3 个答案: