html - Chrome 中的表格样式不同

Question

有一个联系表，我有一些选项可以检查联系时间和方法。我在 Chrome、Firefox 和 Safari 上设置了正确的样式。单选选项左侧的标签，它们都排成一行。

从那以后，我遇到了 chrome 样式损坏的问题，我无法弄清楚 Firefox 和 Safari CSS 完美运行时发生了什么。页面是cbasphaltmaintenance.com

    <table id="contactOptionTable">
            <tr>
                <td>
                <h1>Prefered contact method:</h1>
                </td>    
                <td>
                <input type="radio" value="home" name="contact_Method" class="contactRadioClass"/>
                <label for="home">Home</label>
                </td>
                <td>
                <input type="radio" value="mobile" name="contact_Method" class="contactRadioClass" />
                <label for="home">Mobile</label>
                </td>
                <td>
                <input type="radio" value="email" name="contact_Method" class="contactRadioClass" />
                <label for="home">Email</label>
                </td>
            </tr>
            <tr>
                <td>
                <h1>Prefered contact time:</h1>
                </td>    
                <td>
                <input type="radio" value="morning" name="contact_Time" class="contactRadioClass"/>
                <label for="home">Morning</label>
                </td>
                <td>
                <input type="radio" value="afternoon" name="contact_Time" class="contactRadioClass" />
                <label for="home">Afternoon</label>
                </td>
                <td>
                <input type="radio" value="night" name="contact_Time" class="contactRadioClass" />
                <label for="home">Evening</label>
                </td>
            </tr>
            </table>

这是适用于 safari 和 firefox 的 css

    #contactOptionTable{
vertical-align: middle;
float: left;
padding: 0;
margin-left: 14%;
 }

    .contactRadioClass{
    margin-top:10px;
    }

我不知道这里发生了什么，但它困扰着我。我感谢所有的帮助。如您所见，我的耳朵后面有点湿。

Answer 1

在您的 CSS 中添加以下类。

#contactOptionTable input
{
  float:right;
}