【问题标题】:How to style button inputs to be identical in Chrome and Firefox?如何在 Chrome 和 Firefox 中将按钮输入样式设置为相同?
【发布时间】:2012-07-21 07:06:10
【问题描述】:

在 Chrome 和 FireFox 中查看 this JSFiddle example

在 Chrome 中,按钮应该比在 FireFox 中小一点。我添加了来自How to reset default button style in Firefox 4 + 的解决方案 CSS(这使按钮变小了一点),但在 FireFox 中按钮仍然更大。此示例中的差异不是很明显,但请看看它如何影响我的设计。

铬:

火狐:

如您所见,FireFox 中的按钮较粗,并且正在影响布局。有什么办法可以避免使用样式化的 div 代替按钮?


另外,我正在使用 Meyer 的 CSS 重置样式表

【问题讨论】:

    标签: css firefox google-chrome button


    【解决方案1】:

    Firefox 为 inputs 和 button 元素添加了特殊的填充。这会照顾它:

    button::-moz-focus-inner, 
    input[type="button"]::-moz-focus-inner, 
    input[type="submit"]::-moz-focus-inner, 
    input[type="reset"]::-moz-focus-inner {
      padding: 0 !important;
      border: 0 none !important;
    }
    

    【讨论】:

    • 抱歉,没看到。 -moz-focus-inner 通常是造成跨浏览器按钮大小差异的原因。没有通读整个问题。
    【解决方案2】:

    您是否尝试过 CSS 重置?我在这台计算机上没有 FF,否则我会检查它是否有效。

    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css">
    

    【讨论】:

    • 我已经在使用一个,将其编辑到我的问题中。此外,JSFiddle 默认对 CSS 进行规范化。
    【解决方案3】:

    您有没有在页面上的按钮上设置line-height?您还没有搞定,但line-height 的其他内容不正常,在 Firefox 和我相信的其他一些浏览器上不被接受 - 也许是 IE,我不确定。

    【讨论】:

    • 我还没有碰过line-height 属性。好主意,但为什么这也会影响按钮的宽度?
    • 在我看来,图像的宽度似乎没有改变。也许他们是。我不确定。
    • 您的页面在线吗?我可以看看。
    • 唉,事实并非如此。但是使用的样式和遇到的问题与我在问题中提供的 JSFiddle 示例相同
    • 我没有遇到小提琴的问题。
    【解决方案4】:

    我得出的结论是,确保按钮/提交输入在浏览器中保持相同的唯一方法是使用 div 重新创建它们。创建按钮输入很容易,因为您可以像在按钮上一样将点击事件附加到 div 上。创建提交输入几乎没有任何困难。我使用 jQuery 解决了这个问题,方法是声明一个类,例如“提交”,并将提交按钮功能添加到加载该类的所有元素。这是一个例子:

    // On page load:
    $('.submit').on('click', function(e) {
        $(this).closest('form').submit();
    });
    

    具有 submit 类且不在表单中的 Div 在单击时不会执行任何操作。

    如果您将tabindex="n"(其中n 是一个数字)添加到元素,也可以使用tab 来聚焦,就像普通按钮一样。您还可以通过使用 :focus css 伪类来设置它的样式以显示它的焦点。然后您可以使用空格或回车键单击带有此事件处理程序的按钮:

    $('.submit').on('keypress', function(e) {
        if (e.keyCode == 13 || e.keyCode == 32)
            $(this).closest('form').submit();
    });
    

    (我匆忙写了最后一个sn-p,并没有实际测试过。如果您发现其中有错误或测试成功,请相应地编辑此答案。)

    【讨论】:

    • +1;我讨厌浏览器使输入样式变得困难的事实,因为我讨厌从头开始重新创建所有这些功能。我不建议这样做,但有时你必须做你必须做的事情。此外,极小的语义改进,使用$(this).closest('form').submit();
    • 是的,我刚刚阅读了这两个函数的文档,closest 更适合这项任务。感谢您指出。
    • Tab 键和按 Enter 键是否可以使用键盘焦点?
    • @OskarBerggren 不是自动的,您必须在按钮中添加 tabindex="n" 和几行额外的 JavaScript。我更新了我的答案。
    • @Hubro 太好了,谢谢,很多网站都没有遵守这方面的事实标准。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-01-20
    • 2020-01-12
    • 2021-10-13
    • 1970-01-01
    • 2015-08-28
    • 2014-04-05
    • 2013-06-05
    相关资源
    最近更新 更多