单选按钮组空间问题和框阴影在Safari浏览器中不起作用 [英] Single select button group space issue and box-shadow not working in safari browser

问题描述

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



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



屏幕截图： https://i.stack.imgur.com/oLsmo.png [ ^ ]



JSFiddle：编辑小提琴 - JSFiddle [ ^ ]



我尝试了什么：



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

它正在部分工作，但是当你添加更多的文字，文字没有正确包装。



请检查以下链接：



小提琴1 ：编辑小提琴 - JSFiddle [ ^ ]



小提琴2：编辑小提琴 - JSFiddle [ ^ ]



这些东西在除Safari之外的所有浏览器中都能正常工作。

It's working partially, but when you add more text, the text not wrapping properly.

Please check below links:

Fiddle1: Edit fiddle - JSFiddle[^]

Fiddle2: Edit fiddle - JSFiddle[^]

Those things are working properly in all browsers except Safari.

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