单选按钮组空间问题和框阴影在Safari浏览器中不起作用

本文介绍了单选按钮组空间问题和框阴影在Safari浏览器中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用带有标签标签的单选按钮组创建了单选按钮组，使用css display：table和table-cell用于文本内容超过或溢出每个按钮。它适用于所有浏览器（Chrome，Firefox和IE），期望Safari浏览器。

我在每个按钮之间获得空间。我尝试了一些黑客和在线解决方案，但我无法找到/修复正确的解决方案。

屏幕截图： []

JSFiddle： []

我尝试了什么：

JSFiddle： []

I have created single select button group using radio button with label tag using css display: table and table-cell for text content exceed or overflow in each button. It's working fine all browsers (Chrome, Firefox & IE) expect Safari browser.

I am getting space between each button. I have tried some hacks and online solutions but i am not able to find/fix proper solution.

Screenshot: https://i.stack.imgur.com/oLsmo.png[^]

JSFiddle: Edit fiddle - JSFiddle[^]

What I have tried:

JSFiddle : Edit fiddle - JSFiddle[^]

推荐答案

.selection-group .single-select {
    /* display: table; */
    /* font-size: 0; */
    display: inline-block;
    width: 100%;
}

.selection-group input + label

{

显示：inline-block;

float：left;

}

{
display: inline-block;
float: left;
}

这篇关于单选按钮组空间问题和框阴影在Safari浏览器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

jsfiddle