关键词：
【中文标题】单选按钮组空间问题和框阴影在 Safari 浏览器中不起作用【英文标题】：Single select button group space issue and box-shadow not working in safari browser 【发布时间】：2019-04-13 01:28:40 【问题描述】：我使用带有标签标签的单选按钮创建了单选按钮组，使用 css 显示：文本内容的表格和表格单元格在每个按钮中超出或溢出。它工作正常所有浏览器（Chrome、Firefox 和 IE）都需要 Safari 浏览器。
我在每个按钮之间获得了空间。我尝试了一些黑客和在线解决方案，但我无法找到/修复正确的解决方案。
屏幕截图：
HTML 代码：
<div class="selection-group">
<span class="field-label" id="singlecard">Title field</span>
<div class="single-select">
<input name="single-select1" type="radio" id="card1" aria-describedby="singlecard">
<label for="card1">Card 1</label>
<input name="single-select1" type="radio" id="card2">
<label for="card2">Card 2</label>
<input name="single-select1" type="radio" id="card3">
<label for="card3">Card 3</label>
<input name="single-select1" type="radio" id="card4">
<label for="card4">Card 4</label>
</div>
</div>
CSS 代码：
.selection-group .single-select
display: table;
font-size: 0;
.selection-group .field-label
font-size: 0.8125rem;
color: #6c7378;
display: block;
margin-bottom: 0.75rem;
line-height: 1.125rem;
.selection-group input
position: absolute;
clip: rect(0,0,0,0);
pointer-events: none;
width: 0.0625rem;
height: 0.0625rem;
.selection-group input + label
background-color: #ffffff;
border: 0.0625rem solid #b7bcbf;
color: #0070ba;
font-size: 0.9375rem;
line-height: 1.5rem;
padding: 0.75rem 1.5rem;
text-align: center;
cursor: pointer;
display: table-cell;
vertical-align: middle;
.selection-group input + label:focus
outline-offset: -0.1875rem;
.selection-group input:focus + label
position: relative;
z-index: 1;
-webkit-box-shadow: 0 0 0.375rem #3b99fc;
box-shadow: 0 0 0.375rem #3b99fc;
color: #0070ba;
.selection-group input:checked:focus + label
-webkit-box-shadow: 0 0 0 0.1875rem #009CDE;
box-shadow: 0 0 0 0.1875rem #009CDE;
.selection-group input + label:hover
background-color: #e4f1fb;
.selection-group input:checked + label
background-color: #0070ba;
color: #ffffff;
border: 0.0625rem solid #0070ba;
font-weight: 500;
.selection-group .single-select input + label:not(:last-of-type)
border-right: none;
.selection-group .single-select input + label:first-of-type
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
.selection-group .single-select input + label:last-of-type
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
JSFiddle
并且 box-shadow 在 Safari 浏览器中不起作用。
【问题讨论】：
我正在等待解决方案。请提供一些提示或解决方案。 输入元素后面的标签导致空格。如果我删除/隐藏（显示：无）输入元素，空间将在 safari 浏览器中消失，但问题是键盘选项卡键访问将不起作用。我不知道为什么这个空间只用于 safari 浏览器。请任何人帮助或建议如何解决此问题。谢谢 添加了更多 jsfiddle 示例：JSFiddle1:jsfiddle.net/tor9f82q/4 JSFiddle1:jsfiddle.net/tor9f82q/5 如果我包括 display:inline-block 和 float:left，它会在所有浏览器中产生对齐问题。 【参考方案1】：我找到了解决方案，专门为 safari 浏览器创建了媒体查询，并在该定义的显示中：flex。它工作正常。
对于其他浏览器，它将使用display: table 和table-cell，对于Safari 浏览器，它将使用display: flex。这有点像 Hack，但无论如何它是有效的。
JSFiddle
【讨论】：
Html.RadioButtonFor 单选按钮不在 Safari 或 Chrome 中呈现
...：哎呀！我的单选按钮会在除Safari和GoogleChrome之外的所有浏览器中呈现。使用ASP.NETMVC4，我在我的一个观点中写了这个：< 查看详情
悬停时的 CSS 变换和框阴影
...CSStransformandbox-shadowonhover【发布时间】：2021-07-1318:39:02【问题描述】：我有使用材质UI的卡片组件。卡片在悬停时变形，卡片上也应该出现阴影。但是当我把box-shadow阴影出现在变形前的盒子上时，变形后的卡片和阴影之间有空白... 查看详情
框阴影在 safari 上被父 div 截断
...并且不会超出它。注意：这个问题只出现在safari上，其他浏览器都没有问题。旁注我已经尝试使用position:relative和z-index和overflow:visible在所有父元素上 查看详情
自定义单选按钮在 iOS Safari 中不可见
】自定义单选按钮在iOSSafari中不可见【英文标题】：CustomradiobuttonnotvisibleiniOsSafari【发布时间】：2017-02-0918:46:26【问题描述】：我使用下面提到的css来显示自定义单选按钮input[type=radio]display:none;.radio-optionslabel::beforecontent:"\\2b24";co... 查看详情
单选按钮更改事件在 chrome 或 safari 中不起作用
】单选按钮更改事件在chrome或safari中不起作用【英文标题】：RadioButtonchangeeventnotworkinginchromeorsafari【发布时间】：2011-07-0217:04:24【问题描述】：我在页面上有一些单选按钮，选择是，其他一个其他控件（下拉目和文本框）变得可... 查看详情
客户端代码：查找选中了哪个单选按钮
...tonischecked【发布时间】：2019-01-2504:10:14【问题描述】：在浏览器的Javascript代码中，给定一组单选按钮的name，有没有办法直接找出哪个按钮被选中，而不用逐个遍历每个按钮来检查它的checked属性？【问题讨论】：【参考方案1】... 查看详情
从图例元素中删除字段集边框和框阴影
...derandbox-shadowfromlegendelement【发布时间】：2013-10-3123:58:19【问题描述】：我正在尝试从我的图例所在的区域移除背景线和阴影。在图例属性中将背景设置为透明后，我仍然可以看到线条。我的代码如下HTML：<fieldset><legend>te... 查看详情
禁用单选按钮组
】禁用单选按钮组【英文标题】：Disablingradiobuttongroup【发布时间】：2011-01-0419:59:43【问题描述】：由于Repeater组件不会在mxml中生成单选按钮组，并且我无法通过ActionScript执行相同操作，因为当我尝试以这种方式创建单选按钮组... 查看详情
如何在 Android 中验证单选按钮组？
】如何在Android中验证单选按钮组？【英文标题】：HowcanIvalidatearadiobuttongroupinAndroid?【发布时间】：2011-04-2920:50:57【问题描述】：我在Android的游戏应用中有一个单选按钮组。在用户进入实际游戏之前，他必须选择一个级别，即三... 查看详情
我想在页面加载时检查某些单选按钮组中的某些特定单选按钮？
】我想在页面加载时检查某些单选按钮组中的某些特定单选按钮？【英文标题】：Iwanttochecksomeparticularradiobuttoninsomeradiobuttongroupswhenpageloads?【发布时间】：2013-06-2306:17:00【问题描述】：我正在使用django。我的网页是这样工作的，... 查看详情
LibreOffice：如何制作单选按钮组
】LibreOffice：如何制作单选按钮组【英文标题】：LibreOffice:howtomakeaRadioButtongroup【发布时间】：2017-12-0606:29:34【问题描述】：在LibreOfficeWriter文档中，如何创建单选按钮组？我无法将按钮“组”。我使用的是LibreOffice5.3.4.2(x64)。我... 查看详情
如何在 Windows 窗体中对单选按钮组进行分组
】如何在Windows窗体中对单选按钮组进行分组【英文标题】：HowtogroupGroupsofradiobuttonsinWindowsforms【发布时间】：2012-06-1206:24:31【问题描述】：我有一个带有多个单选按钮的表单，一次只能选择一个。一些单选按钮是连接的，需要通... 查看详情
单击事件未在引导单选按钮组中触发
】单击事件未在引导单选按钮组中触发【英文标题】：clickeventnotfiringwithinabootstrapradiobuttongroup【发布时间】：2014-01-1622:15:05【问题描述】：我动态创建单选按钮并使用on()函数尝试捕获点击并对其进行处理。只要我使用单选按钮... 查看详情
DevExpress Winform 控件单选按钮组
】DevExpressWinform控件单选按钮组【英文标题】：DevExpressWinformcontrolsRadiobuttongroup【发布时间】：2011-07-0716:07:33【问题描述】：我正在开发一个winform应用程序，我需要在其中显示一个单选按钮组，以允许用户在互斥的选项中指定选... 查看详情
在 ListView.builder() 中动态创建单选按钮组
】在ListView.builder()中动态创建单选按钮组【英文标题】：DynamicallycreateradiobuttonGroupinListView.builder()flutter【发布时间】：2021-07-2619:39:47【问题描述】：我想创建这样的用户界面最后，我得到了所有选中的单选按钮的详细信息。这是... 查看详情
在 Meteor 中获取 twitter bootstrap 单选按钮组的值
】在Meteor中获取twitterbootstrap单选按钮组的值【英文标题】：GetvalueoftwitterbootstrapradiobuttongroupinMeteor【发布时间】：2013-08-0818:50:41【问题描述】：我知道有很多关于此的主题，但不幸的是，我找不到可行的解决方案。所以这是我的... 查看详情
使用 jQuery 验证插件验证单选按钮组
】使用jQuery验证插件验证单选按钮组【英文标题】：ValidationofradiobuttongroupusingjQueryvalidationplugin【发布时间】：2010-09-2114:41:52【问题描述】：如何使用jQuery验证插件对单选按钮组进行验证（应该选择一个单选按钮）？【问题讨论... 查看详情
获取单选按钮组的值
】获取单选按钮组的值【英文标题】：GetValueofRadiobuttongroup【发布时间】：2011-03-2816:53:10【问题描述】：我正在尝试使用下面给出的jQuery语法获取两个单选按钮组的值。当下面的代码运行时，我从第一个单选按钮组中选择了两次... 查看详情