Question

我正在设计一个已标记的表单（进行了一些标记更改），我通常在Firefox中使用样式，因此我可以使用firebug和Web开发人员工具栏。

在这个项目中，我注意到我的样式在基于webkit的浏览器Chrome和Safari中的某个特定区域（几个元素）的显示方式与Firefox相比（我们甚至不会进入Internet Explorer，尽管它是siding）使用Firefox显示。）

我无法弄清楚为什么风格的显示方式如此不同。通常有一些规则，我忽略了Firefox只是理所当然，其他人需要它指定。但在这里，我不明白为什么它以这种方式显示。特别是我指的是表单的底部区域，用户可以在其中输入联系信息，然后提交表单。我会附上屏幕截图，以供参考。

这是网址，您可以自行查看。虽然被告知这是一个生产页面（已经发布），所以如果您试用该表格，您将被添加到CURE的联系人数据库。

http://www.helpcurenow.org/survey2010

以下是截图：

Firefox（我打算看的方式）alt text http://static.helpcurenow.org/images/test/firefox.jpg

Chrome，然后是Safari - 奇怪的更改提交按钮alt text http://static.helpcurenow.org/images/test/chrome.jpg alt text http://static.helpcurenow.org/images/test/safari.jpg

作为奖励，如果有人想帮助我搞清楚为什么IE7只想显示问题背后的背景，以及如何解决这个问题我会非常感激！

非常感谢。

Answer 1

您的<ol>未关闭，这使得webkit将提交按钮置于<fieldset>内，以尝试修复您的代码。

Answer 2

FF和Webkit浏览器确实存在一些差异，我也遇到过它们，尤其是表单！

我通过将我的CSS拆分为使用CSS Browser Selector脚本来定位两个浏览器来解决它。创造了奇迹，只是为Webkit设置了不同的东西并修复了整个事情。

您是否有实时示例或一些源代码可以发布，以便我们可以帮助您解决IE7问题？

希望有所帮助。

修改：

<ol> 

            <li class="contact-info"> 
                <label class="field-required" for="first_name">First Name</label> 
                <input type="text" size="35" maxlength="250" name="first_name" value="" id="first_name" /> 
            </li> 

            <li class="contact-info"> 
                <label class="field-required" for="last_name">Last Name</label> 
                <input type="text" size="35" maxlength="250" name="last_name" value="" id="last_name" /> 
            </li> 

            <li class="contact-info"> 
                <label class="field-required" for="email_address">Email Address</label> 
                <input type="text" size="35" maxlength="100" name="email_address" value="" id="email_address" /> 
            </li> 

        </fieldset> 

        <!--TransactionFields section end--> 
        <script language="JavaScript" type="text/javascript"> 
        ...
        </script> 

        <div class="button-row"> 
            <input type="button" name="SubmitButton" id="SubmitButton"  value="Submit" onclick="SubmitForm425952(form);"  class='HtmlButton' /> 
        </div> 

    </form> 
    <!--form javascript--> 
    <script language="JavaScript"> 
    ...
    </script> 

NO OL


</div></td></tr> 
</table> 


    </div> 
    <!--End Featured Content-->

第二个脚本标记后，您的<ol>尚未关闭。

Answer 3

您可能忘记了-moz特定的CSS规则。

例如 - 要使用框大小调整，您可能需要指定-moz-box-sizing

Answer 4

您是否使用过browser reset css。不同的浏览器对于各种元素有不同的默认样式，重置CSS会重置所有这些默认样式，以便所有浏览器中的东西看起来相似。

Webkit浏览器渲染CSS与Mozilla Firefox不同......为什么？

4 个答案: