2

我有一个span和一个input元素，它们共享相同的字体 CSS 定义。为什么 Chrome 会为它们使用不同的字体？我将如何解决这个问题？

检查输入元素

检查跨度元素

我的目标是让它们在 IE9、Chrome 和 FF 中看起来完全一样。

CSS 定义（固定），如果它们仍然重要的话。

* {
    font-family: Verdana,Helvetica,Arial,sans-serif; /* Moving here fixed it */
}
body {
    /*font-family: Verdana,Helvetica,Arial,sans-serif; -- This caused the issue*/
    font-size: .8em;
    margin: 0;
    padding: 0;
    color: #000;
}
.button 
{
    text-align:center;
    min-width:80px;
    display:inline-block;
    white-space:nowrap;
    background-color:#4A8CF6;
    color:#FFF;
    padding:4px;
    margin:1px;
    border:0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    font-size: .8em;
}

解决方案

问题是 span 元素继承自我的 body 的 CSS 定义，而 input 元素没有。我已经在我的 CSS 中定义了字体，body { font-family:...; }就像我的计算结果显示一样，我认为使用display: inline-block;会强制它们都从 body 继承字体，但事实并非如此。

解决方案是切换到使用* { font-family:...; }字体定义。按钮和可点击类简单地定义了大小和颜色等。

4

2 回答 2

4

如果您希望它们具有相同的字体，则必须逐字指定输入元素，如下所示：

/* Or input[type=submit] depending on your needs */
span, input { 
    font-family: Arial, sans-serif; /* Your font here */
}

否则，浏览器将使用您的问题显示的默认值。您正在查看Computed Styles下的内容，这表明 Chrome 已经为您确定了值，因为您没有指定它们。

于 2013-01-23T08:57:35.297 回答
-2

您应该在样式表的开头应用 CSS 重置规则。其目的是使所有元素在所有浏览器中具有相同的外观。

例子：

http://developer.yahoo.com/yui/reset/

http://meyerweb.com/eric/tools/css/reset/

也可能有用的相关问题：https ://stackoverflow.com/questions/116754/best-css-reset

于 2013-01-23T08:53:37.027 回答