Webkit 浏览器呈现的 CSS 与 Mozilla Firefox 不同……为什么？答案

【问题标题】：Webkit browsers rendering CSS different than Mozilla Firefox...Why?Webkit 浏览器呈现的 CSS 与 Mozilla Firefox 不同……为什么？
【发布时间】：2011-02-21 21:23:14
【问题描述】：

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

在这个项目中，我注意到我的样式在基于 webkit 的浏览器 Chrome 和 Safari 中的一个特定区域（几个元素）的显示方式与在 Firefox 中完全不同（我们甚至不会进入 Internet Explorer，虽然它是侧板与 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 不想只显示问题背后的背景，以及如何解决这个问题，我将非常感激！

非常感谢。

【问题讨论】：

Chrome 和 Safari 也有一个类似 Firebug 的工具，称为 Web Inspector。只需右键单击按钮并选择“检查元素”。在 Safari（也许还有 Chrome）中，您必须从菜单之一 IIRC 启用开发人员工具。

标签： css firefox safari google-chrome webkit

【解决方案1】：

你可能忘记了 -moz 特定的 css 规则。

例如 - 要使用 box-sizing 您可能必须指定 -moz-box-sizing

【讨论】：

【解决方案2】：

FF 和 Webkit 浏览器确实有一些不同，我也遇到过，尤其是表单！

我通过使用 CSS Browser Selector 脚本拆分我的 CSS 以针对两个浏览器解决了这个问题。创造了奇迹，只是为 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>在第二个脚本标签之后没有被关闭。

【讨论】：

【解决方案3】：

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

【讨论】：

还有其他问题：validator.w3.org/…
@Mark Korpel：经过检查，许多这些错误实际上只是字符串中的 html 代码，正在被验证，就好像它们是实际的 dom 节点一样。当然，还有更多错误，但我非常确信这是导致观察到的行为的错误，因为 chrome 中的 DOM 检查会显示它确实认为按钮位于字段集中，尽管 @987654324 @ 出现在源代码中，在按钮之前
我也看到了。我的评论只是一个旁注。顺便说一句，我的名字是马塞尔，不是马克。 ;)
@Marcel: 是的，抱歉这个名字打错了 =)

【解决方案4】：

你用过browser reset css。不同的浏览器对各种元素有不同的默认样式，reset CSS 会重置所有这些默认样式，以便在所有浏览器中看起来都相似。

【讨论】：

是的 - 它实际上在 main.css 文件中。