相关疑难解决方法(0)

请参阅以下代码示例:http://jsfiddle.net/Z2BMK/

Chrome/IE8看起来像这样

Firefox看起来像这样

我的CSS是

button {
    padding:0;
    background:#080;
    color:white;
    border:solid 2px;
    border-color: #0c0 #030 #030 #0c0;
    margin:0;
}

如何在两个浏览器中更改代码示例以使按钮相同？我不想使用基于JavaScript的超链接,因为它们不能与键盘上的空格键一起使用,并且它必须具有href不是处理事物的干净方式的URL.

我的解决方案,因为Firefox 13

button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }

我正在尝试使用值设置文本输入的样式,使用占位符的文本输入和跨度,在Chrome中完全相同.具体来说,我想独立于字体大小控制行高.

但是,在输入值上似乎存在某种最小行高(或者导致类似影响的东西),这似乎会以某种方式向下推动文本以防止相同的样式.

示例HTML:

<div>
  <input type="text" value="Text">
  <input type="text" placeholder="Text">
  <span>Text</span>
</div>

CSS:

div {
  line-height: 50px;
  font-family: Arial;
}

input,
span {
  font-size: 50px;
  line-height: 50px;
  height: 50px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

结果可以在以下看到

http://plnkr.co/edit/oHbhKDSPTha8ShWVOC7N?p=preview 以及Linux上Chrome 44.0.2403.155(64位)的以下屏幕截图:

奇怪的是,占位符似乎使用所需的行高设置样式,而输入的文本值定位不同.此时我并不关心占位符的颜色.

如何设置所有3个元素的样式,使文本处于相同位置,我使用自定义行高？

我明白我可以只设置行高度normal或1.2,或减小字体大小,使元素出现相同,但他们不会有视觉外观我要找的.

为什么Chrome中的高度比输入的Firefox大

见这里的例子http://jsfiddle.net/jitendravyas/89Msh/1/

select, input, textarea, button {
    font: 99% sans-serif;
}

input, select {
    vertical-align: middle;
}

body, select, input, textarea {
    color: #444444;
}

button, input, select, textarea {
    margin: 0;
}


input, textarea {
    font-family: inherit;

    line-height: 1.5;
}


input {
    border: 0 none;
    font-size: 32px;
    line-height: 1.1;
    margin-right: 29px;
    padding: 3px 3px 0;
    width: 206px;
    border-radius: 7px;
}