blocks|key|1932136|text|您可以尝试在输入和按钮包装上应用边框，然后设置overflow:hidden。这样，即使它偏离了一个像素，它也是不可见的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1932137|在HTML中：|1932138|<div>
++<input+type=""+/>
++<button></button>
</div>|code-block|syntax|javascript|1932139|在CSS中(大致)：|1932140|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;+}|1932141|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You could try to apply border on the input &amp; button wrapper, then set overflow:hidden.
This way, even if it's off by a pixel, it's not visible.

In HTML:

<pre><code>&lt;div&gt;
 &lt;input type="" /&gt;
 &lt;button&gt;&lt;/button&gt;
&lt;/div&gt;
</code></pre>

In CSS (roughly):

<pre><code>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; }
</code></pre>

blocks|key|2704384|text|与使用padding-bottom和padding-top相比，更喜欢将line-height属性设置为使单行文本垂直居中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2704385|在您的示例中，font-size:+10px+%2B+padding-top:+8px+%2B+padding-bottom:+7px+=+line-height:+25px。|2704386|#ue_but_new+{
++++position:+absolute;
++++padding:++0+6px;
++++line-height:+25px;
++++text-decoration:++none;
++++cursor:++pointer;
}|code-block|syntax|javascript|2704387|entityMap^0|3|E|I|B|10|B|0|7|F|P|G|18|J|1U|H|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|N|$]]

Prefer setting the <code>line-height</code> property to vertically center a single line of text rather than using <code>padding-bottom</code> and <code>padding-top</code>.

In your case <code>font-size: 10px</code> + <code>padding-top: 8px</code> + <code>padding-bottom: 7px</code> = <code>line-height: 25px</code>.

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

blocks|key|2608685|text|如果将元素大小作为文本大小的基础，那么在不同的浏览器、不同的系统、不同的设置等之间，元素的大小总是不同的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2608686|在元素上设置特定的行高，而不是从文本高度填充：|2608687|#ue_but_new{
++position:+absolute;
++line-height:+25px;
++padding:+0+6px;
++text-decoration:+none;
++cursor:+pointer;
}|code-block|syntax|javascript|2608688|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you base element size on text size, it will always vary between different browsers, different systems, different settings, et.c.

Set a specific line height on the element instead of padding from the text height:

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

Because it is just 1px I can't tell if it is the text box next to the button or the button itself. So I was going to take a screenshot and look at it with a measuring tool. From there I was going to look the firefox debugger and ie debugger to see what is off by 1px.

However I was hoping someone might have an idea to what is causing this.

Here is the offending element in ie ( 28 px )

<img src="https://i.stack.imgur.com/D5a4W.png" alt="enter image description here">

Here is where it is correctly displayed in FF, Chrome, etc. ( 27 px )

<img src="https://i.stack.imgur.com/Gcyde.png" alt="enter image description here"> 

<a href="http://www.arcmarks.com" rel="nofollow noreferrer">http://www.arcmarks.com</a>

Here is the CSS for the button:

<pre><code>#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);
}
</code></pre>

IE10 font size is off by 1px. How to fix?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

因为它只有1px，所以我不知道是按钮旁边的文本框还是按钮本身。所以我打算用一个测量工具截取一个截图来观察它。从那时起，我打算查看firefox调试器和ie调试器，看看1px有什么问题。然而，我希望有人能知道是什么导致了这种情况。这是ie (28px)中的违规元素​​这是它在FF、Chrome等中正确显示的位置( 27像...

问IE10字体大小降低了1px。如何修复？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE10字体大小降低了1px。如何修复？EN