元素在 Mozilla 和 chrome 上的显示方式不同

【问题标题】：Elements appears differently on mozilla & chrome元素在 Mozilla 和 chrome 上的显示方式不同
【发布时间】：2014-02-12 19:02:44
【问题描述】：

请在 mozilla 和 chrome 上打开此网站http://goo.gl/0LdOVK。您会注意到页眉和页脚小部件（搜索和订阅表单）略有不同

我真的不知道是什么原因造成的。请帮忙！ :(

非常感谢您

【问题讨论】：

请提供有关问题的更多详细信息或截图
我没有两个浏览器，截图（和代码）会很好。还要考虑 Chrome 和 Firefox 具有不同的偏移量这一事实。有些在元素内设置边框，有些在元素外。当你创建元素时，也许在你的 CSS 中指定某些规则，你知道在两种浏览器中最终会有所不同。

标签： css wordpress cross-browser

【解决方案1】：

您可以做的是在Firefox和其他浏览器（如Internet Explorer）中设置您需要的宽度，然后只需定位chrome即可使用以下方法编辑输入字段的宽度：

@media screen and (-webkit-min-device-pixel-ratio:0) {

    /*Chrome CSS here*/

    .input[type="search"]{

         width: 231px !important;

    }

}


/* For other browsers */
.input[type="search"]{

    width: 210px;

}

因此将输入字段的宽度设置为 'width: 210px;'

然后使用上面的@media 屏幕代码来定位 chrome 并将其设置为您想要的宽度。有可能吗？

【讨论】：

非常感谢 joshbrown！它完美无缺！我希望我能投票赞成你的答案：/祝你有美好的一天！