由于@support，我有两个包装程序A和B交换可见性。如果支持B，则B的div可见；如果不支持B，则A的div可见。
我使用这些包装器来交换div内容（相同的图像，但大小不同），现在我面临着在包装器中为元素设置锚点的问题。A中的div和B中的div应该共享相同的锚，但是我知道我不应该对不同的内容两次给出相同的id。
我能做什么？是否可以使双方的元素共享相同的锚点？还是有解决此问题的另一种方法？
<style type="text/css">
.A {display: block}
.B {display: hidden}
@support (...)
{html {...}
.A {display: hidden}
.B {display: block}
}
</style><body>
<div class="A">
<div id="anchor-x">
<...>
</div>
<div id="anchor-y">
<...>
</div>
<div id="anchor-y">
<...>
</div>
<div class="B">
<div id="anchor-x">
<...>
</div>
<div id="anchor-y">
<...>
</div>
<div id="anchor-z">
<...>
</div>
</body>
</html>解决方案是将您的ID从容器中取出，并在每个部分中包含子容器：
<div id="anchor-x">
<div class="A X">
...
</div>
<div class="B X">
...
</div>
</div>
<div id="anchor-y">
<div class="A Y">
...
</div>
<div class="B Y">
...
</div>
</div>
<div id="anchor-z">
<div class="A Z">
...
</div>
<div class="B Z">
...
</div>
</div>
您可能还需要看一下srcset，它将响应性问题降至<img>元素级别。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句