CSS @Media不能正常工作

我有一块CSS看起来没有工作，我不知道为什么。 - 我正在使用Dreamweaver CC和多个浏览器，结果是一样的。CSS @Media不能正常工作

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名称。

任何帮助/想法不胜感激。

感谢

来源

2017-02-23 motjuice

什么问题？你有“display：none;”的内联样式。即使您在CSS中声明样式，也会隐藏它们。另外，ID应该始终是唯一的。你可以使用类选择器。 – Gezzasa

你缺少你CSS !important，你必须用，因为你的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; 
    } 

}

来源

2017-02-23 12:37:01

鼠她比使用媒体查询来隐藏和显示特定元素，我建议使用它来改变样式。

在div元素类的区别是：

默认

隐藏桌面宽
显示桌面
捉迷藏平板电脑隐藏电话

桌面

隐藏桌面宽
隐藏桌面
捉迷藏平板
隐藏电话

您应该将这些风格移入媒体查询：

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

    //hide desktop-wide, hide-desktop, hide-table, hide-phone styles here 

}

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

来源

2017-02-23 12:37:42 Curt

DOH！

我找到了解决方案！

愚蠢是我最重要的技能之一！

来源

2017-02-23 12:38:04 motjuice

如果他们有同样的问题，请发布解决方案，以帮助其他人，或者将其他答案标记为已接受的答案。 – George

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

你在这两个div上都使用这个类。

<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>

来源

2017-02-23 12:39:36

CSS @Media不能正常工作

回答

相关问题