包含单选按钮的表格在 Firefox 和移动 Safari 中被拉伸答案

【问题标题】：Table containing radio button is stretched in Firefox and mobile Safari包含单选按钮的表格在 Firefox 和移动 Safari 中被拉伸
【发布时间】：2014-10-28 09:37:37
【问题描述】：

我有一个表，其中包含一行“固定”内容，然后是一定数量的包含数据库内容的行。每行中的前 3 个<td> 都包含一个单选按钮，它是表单的一部分。我的问题是这些包含单选按钮的字段使表格伸展，这使得其他字段太小。请看我附上的照片（第一张来自 Mac Safari/Chrome，第二张来自 Firefox）：

在 Chrome 中：

在 Firefox 中：

下面是我的代码的一部分，它打印单选按钮。我拥有 tr、td、table、form 等所有必需的开始和关闭部分。打印为单选按钮名称的 php 变量只包含一个整数，没有其他字符。

echo '<tr>';
echo '<td class="tg-s6z2"><input type="radio" name="'.$koncerter->kon_id.'" value="0" checked /></td>';
echo '<td class="tg-s6z2"><input type="radio" name="'.$koncerter->kon_id.'" value="1" /></td>';
echo '<td class="tg-s6z2"><input type="radio" name="'.$koncerter->kon_id.'" value="2" /></td>';

有什么建议可以解决这个问题吗？我还尝试将其添加到周围的 div 容器中：

<div class="content" style="max-width:650px;">

【问题讨论】：

我还应该注意，如果我删除单选按钮并用一些文本替换它们，问题就不会发生。

标签： html css google-chrome firefox html-table

【解决方案1】：

因为当您删除单选按钮时它会恢复正常，那么您可能有一个 input 的 CSS 声明，它有一个宽度（例如 300 像素宽度）。因此，只需删除该宽度，或执行以下操作：

input[type="radio"]{width:30px; /*or whatever */}

或者这个：删除输入的样式，然后只定位您需要的样式

input[type="text"]{width:120px; /*or whatever */}

在第一种情况下，我们将只为收音机添加样式。在第二个选项中，我们正在重置样式，然后只设置您需要的那些元素的样式

【讨论】：