相关疑难解决方法(0)

我之前已经意识到这个问题,但我想它和现在的情况一样重要.

我发现Firefox对于无法更改的输入字段的默认行高为1.2.至少在OSX中,没有Windows,所以我无法在那里确认.

我做了一些实验和测试,没有办法改变Firefox的默认行高值.所有其他浏览器(好吧,我只是尝试使用Chrome和Safari)完全可以服从我的价值,但不是Firefox.

有没有人注意到这一点,如果是的话,你有没有找到解决方案来解决这个问题？

如何<button>在Firefox和Chrome中使我的内容保持一致？是否有非条件的 CSS解决方案？现在,即使YUI的CSS重置填充0 ,Firefox的按钮也有额外的填充.

我发现要获得相同的外观,Chrome需要加倍填充.

            #fileActions button {
                padding: 0.2em;
            }

@media screen and (-webkit-min-device-pixel-ratio:0) {
            #fileActions button {
                padding: 0.4em;
            }
}

铬

火狐

我正在尝试设计一个元素,当使用Helvetica字体时,它在Firefox和Chrome中显得不一致.然而,Arial和Lucida产生了相同的结果.

在Firefox(左)中,文本根据包含下降文本的文本框垂直居中.在Chrome(右侧)中,居中位于文本顶部的基线附近.

button {
    border: 1px solid black;
    font: 18px Helvetica;
    padding: 10px;
    background: #ddd;
}

小提琴:http://jsfiddle.net/3wmhpb8g/7/

这是在Firefox 31和Mac/Yosemite上的Chrome 38上.

如何使视图保持一致？

在我的按钮标签上(注意:没有输入),我把字符"X".它看起来很正确.但是,当我添加边框时,我意识到角色并没有真正居中.按钮内部似乎有某种填充物.

这是可以删除的吗？如果是这样,怎么样？

我试图添加样式(通常的填充,边距,对齐和valign),但它没有给我任何有用的东西.

问题看起来像这个jsFiddle.

<button style='width:18px;height:18px;'>X</button>

我知道有很多FF/Chrome CSS问题,但我似乎无法找到这个问题.

这是一个JS小提琴显示问题:http://jsfiddle.net/ajkochanowicz/G5rdD/1/

(长篇CSS的道歉,这是从网站上复制的.)

从本质上讲,Firefox和Chrome为按钮的最内部宽度4和6提供了两个不同的值.我希望它们都是4或更少.是什么造成的？

我在按钮内有一个 span 元素。跨度有一个背景颜色，但我无法让它填充 Firefox 中的按钮，在 Chrome 和 IE 中很好。

我看过两个类似的问题，但他们的答案似乎并没有为我解决这个问题。

• 在 Firefox 中删除额外的按钮间距/填充
• 使用锚标记的Firefox奇数填充

这是我的问题的精简版：

div {
    height: 300px;
    width: 300px;
    background-color: red;
}
button {
    padding: 0px;
    margin: 0px;
    color: inherit;
    border: 0px none;
    background-color: blue;
}
span {
    background-color: yellow;
    display: block;
    width: 100%;
}

<div>
    <button><span>span</span></button>
</div>

input, select { padding: 2px; border: solid 1px red; }

<input value="Foo">
<select><option>bar!</option></select>

尽管它们都有相同的padding和border-width，但结果<select>显然比相应的要高<input>。（在火狐浏览器中测试）

您能解释一下身高差背后的原因吗？如果我删除padding或border-width规则，那么问题就会消失。不幸的是，这对于我的项目来说不是一个好的解决方案。

我希望拥有跨浏览器一致的像素完美布局，即使是移动浏览器也是如此。到目前为止，我一直保持与 for 不同的for padding，但如果我可以对两者使用一种设置，我会更喜欢。<select><input>

我们发现了一个简单的 CSS 规则来解决Firefox 中关于 s 的类似问题<button>。我知道这可能没那么简单，因为<select>我发布这个问题是为了确定答案。