IE10字体大小偏差1px。怎么修？

Question

因为它只是1px，我无法判断它是否是按钮旁边的文本框或按钮本身。所以我打算截取屏幕并用测量工具看一下。从那里我将看看firefox调试器和即调试器，以查看1px关闭的内容。

然而，我希望有人可能知道导致这种情况的原因。

这是ie（28 px）

中的违规元素

这是在FF，Chrome等中正确显示的位置（27像素）

http://www.arcmarks.com

这是按钮的CSS：

#ue_but_new{
  position: absolute;
  padding:  8px 6px 7px 6px;
  text-decoration:  none;
  cursor:  pointer;
}

p.small_white{
  font-size:    10px;
  color:        #ffffff;
}

.blue_but{
  color:       #ffffff;
  border:      1px solid #057ed0;
  background:  -moz-linear-gradient(top, #31baed, #019ad2);
}

Answer 1

如果您根据文字大小确定元素大小，则在不同浏览器，不同系统，不同设置等之间总是会有所不同。

在元素上设置特定的行高，而不是从文本高度填充：

#ue_but_new{
  position: absolute;
  line-height: 25px;
  padding: 0 6px;
  text-decoration: none;
  cursor: pointer;
}

Answer 2

您可以尝试在输入和输入上应用边框。按钮包装器，然后设置overflow：hidden。 这样，即使它被一个像素关闭，它也不可见。

在HTML中：

<div>
  <input type="" />
  <button></button>
</div>

在CSS（粗略）中：

div {
  border:1px solid #ccc;
  border-radius:3px;
  background:#fff;
  overflow:hidden;
}
input {
  border:0;
  background:transparent;
}
button {
  background:blue;
}
div, input, button { height:22px; }

Answer 3

首选将line-height属性设置为垂直居中单行文本，而不是使用padding-bottom和padding-top。

根据您的情况font-size: 10px + padding-top: 8px + padding-bottom: 7px = line-height: 25px。

#ue_but_new {
    position: absolute;
    padding:  0 6px;
    line-height: 25px;
    text-decoration:  none;
    cursor:  pointer;
}