小编jac*_*ack的帖子

我有一个伪元素，悬停时出现：

height: 0.4vh;

高度不会改变，只有宽度会改变。然而，由于某种原因，在某些条件下，不同伪元素的高度不同（这里的两条深色线都有height: 0.4vh）：

我举起这个小提琴来演示，但意识到这种奇怪现象是否发生取决于视口高度： https: //jsfiddle.net/vuw693La/

我在 Chromium 和 Firefox 上遇到这个问题。我是否做错了什么，或者没有办法使vh单位达到“像素完美”？

我有一个页面,我正在尝试编码,用户必须从许多选项中选择一个,显示为缩略图网格.类似的网页,我已经使用role="radiogroup"和role="radio"(及相应的脚本,标签等),而且运作良好-这一个区别是,有较大的RadioGroup中内的多个部分.

编辑,澄清:我宁愿使用原生的单选按钮,正如几个人所指出的那样.我可能无法做到,因为这是一个很大的角度应用程序,我需要解决很多奇怪的行李,但我正在研究它.也就是说,无论他们是role="radio"或者type="radio",我的问题都是关于沟通的最佳方式,其中一些是组合在一起的.

用户只能从这些部分中选择一个选项.结构如下:

选择一张图片

艺术家1

• 图片A
• 图B

艺术家2

• 图片C
• 图片D.

基本上,我正在寻找一种方法来保留"艺术家"背景,同时在图像选项中移动.optgroup从select元素中得到的东西.我试过fieldset,哪种作品; 我想知道这是不是最好的方式？

这是我目前拥有的,结构方面的.(将根据需要通过JS添加适当的焦点和键盘管理.)

<form id="select-design" aria-label="Design Options">
<h2>Choose an image</h2>

<div role="radiogroup" id="collections-list" aria-label="Options" tabindex="0">

    <fieldset id="group-1">
        <legend>Artist: Jack Kirby</legend>

        <div role="radio" aria-checked="false" tabindex="-1">
            <img src="//placehold.it/200x200/bada55/fff" alt="Cool Picture">
        </div>

        <div role="radio" aria-checked="false" tabindex="-1">
            <img src="//placehold.it/200x200/0de/fff" alt="Also Cool Picture">
        </div>

    </fieldset>

    <fieldset id="group-2">
        <legend>Artist: Kevin Maguire</legend>

        <div role="radio" aria-checked="false" tabindex="-1">
            <img src="//placehold.it/200x200" alt="Nice Art"> …