html - 有没有办法解决 IE10&9 更宽的字体渲染差异？-6ren

html - 有没有办法解决 IE10&9 更宽的字体渲染差异？

转载作者：行者123 更新时间：2023-11-28 01:49:36

25

4

我在使用 IE10 和 9 字体呈现 arial 时遇到问题；
在 IE7、8、Chrome、FF 上，它就像我在 Dreamweaver 上看到的一样，
但是 IE10 和 9 字体变得更宽，使我的文本跳到一个额外的行。

Reset.css 或 normalize.css 都没有帮助。

截图:

enter image description here

这是我的代码:

<style type="text/css">
<!--
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color: gray;
    margin-bottom: 0px;
    font-style: normal;
    font-weight: 300;
} 

#container {
    border: 1px solid #DCD7D4;
    width: 768px;
    min-height: 400px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
}
#left {
    float: left;
    width: 580px;
    min-height: 400px;
    background-color: #FBFBFB;
    color: #565656;
}

#margin {
    margin-bottom: 6px;
    margin-left: 18px;
    margin-right: 6px;
    margin-top: 11px;
}

.text {
    font-size: 15px;
    color: #565656;
    font-weight: 400;
    line-height: 21px;
    margin-top: 0px;
    margin-bottom: 2px;
}

-->
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

<div id="container">
  <div id="left">
    <div id="margin">
      <p class="text">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
        AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
AAAA AAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA aaa aaaaaaaa</p>
    </div>
  </div>

  <br style="clear: left;" />
</div>


</body>

Here's the jsfiidle

谢谢

最佳答案

您的屏幕截图之间的差异实际上来自所讨论浏览器之间字体渲染的差异。下面是在 Win7 上的 Chrome 和 IE9 中你的 fiddle 中的 A 字母的放大截图(在添加 letter-spacing: 0; 之后)。

enter image description here

如您所见，即使是相同的字体 (Arial)、font-size、font-weight 和 letter-spacing在这两种情况下，IE9 都会将字母渲染得更宽一些，从而使行/单词更长。

IE9 使用 DirectWrite 模式/技术来呈现字体，这与 IE6-8 使用的 GDI 模式相反，Windows 机器上的 Chrome、Opera(有时还有 Firefox)(source)。这解释了为什么 IE9(及更高版本)呈现的字体与 Windows 上的其他浏览器不同。

根据上面的同一篇文章:

DirectWrite not only gives smoother outlines, it also applies subpixel rendering to PostScript fonts. Unlike TrueType rendering, however, it allows for more gray pixels in order to reflect stroke weights more realistically. That makes it well-balanced, and similar to Mac OS rendering.

DirectWrite 字体渲染与 Mac OS 字体渲染相似(但不同)，这可能解释了为什么我在 OSX 上的 Chrome 和 Firefox 中获得的结果与您在 IE9 中获得的结果相似。

更新:您可以尝试的一件事是尝试使用不同的网络字体。 In this example ，我使用了 Source Sans Pro(Google 字体)，您可以看到 IE9 和 Chrome 之间的渲染差异不太明显。

关于html - 有没有办法解决 IE10&9 更宽的字体渲染差异？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20806854/

25

4

0

文章推荐： c# - 无法通过警报调用 javascript 函数

文章推荐： c++ - Boost上下文实现

文章推荐： javascript - 单击时切换音频？

jquery - 我想知道什么是实际的 IE 条件语句来支持所有旧版 ie 以及最新版本 ie
我是网页设计新手。现在我遇到了我目前工作的 2 个网站的问题。我的模板只支持 Firefox 浏览器，不支持其他主流浏览器，如 IE、chrome、Opera、safari。我试过一些 If IE
javascript - 内容="IE=7; IE=9"和内容="IE=7, IE=9"有什么区别
在我的 HTML 上，使用了下面的元标记来解决一些字体问题。我只想知道: 这两个元标记的含义相同吗？还是每一个都不一样？ [以逗号分隔] [以分号分隔] 请解释一下。最佳答案 Microsoft
html - "X-UA-Compatible"内容= "IE=9; IE=8; IE=7; IE=EDGE"
这句话究竟是什么意思？部分示例使用 ,分隔 IE 的版本，而有些使用 ; ;哪个是正确的？订单IE=9; IE=8; IE=7; IE=EDGE有一些重要性，我想知道。编辑:我正在使用最佳答
html - "X-UA-Compatible"内容= "IE=9; IE=8; IE=7; IE=EDGE"
这句话究竟是什么意思？一些示例使用 ,分隔 IE 的版本，而有些使用 ; ;哪个是正确的？订单IE=9; IE=8; IE=7; IE=EDGE有一定的重要性，我想知道。编辑:我正在使用最佳
internet-explorer - IE 8's Developer Tools: Browser Mode: IE 7, IE 8, but what is IE 8 "兼容性 View ”？
在 IE 8 中，我们可以带出开发者工具。然后在顶部，有一个浏览器模式: IE 7 IE 8 IE 8 Compatibility View 所以如果 IE 7是强制页面显示为好像浏览器是 IE 7，
javascript - 单选按钮颜色在 IE 11 中默认为黑色，但在 IE 8 中默认为蓝色。如何使 IE 11 的单选按钮与 IE 8 相同？
我认为不需要任何描述。我只需要我的 IE 11 单选按钮与 IE 8 中的一样，即颜色为 3-d 蓝色。在 IE 11 中，默认单选按钮是二维的，颜色为黑色。目前还没有解决这个问题。最佳答案检查这
java - 如果用户单击 IE Pane ，则 IE 中的模态对话框会隐藏在 IE 后面
我必须编写一个显示密码对话框的小程序。问题是对话框设置为始终在顶部，但是当用户单击 IE 窗口时，对话框仍然隐藏在 IE 窗口后面。并且由于对话框是模态的并且保持全部 IE 线程 IE Pane 不会
css - 如何为所有 IE 浏览器制作样式表。 ie.css 中不只是 IE 8
如何制作适用于所有 IE 浏览器的样式表。不只是 ie.css 中的 IE 8 本站主题的ie.css文件中只包含IE8样式。最佳答案他们这样做的原因是因为他们可能不支持 Internet Exp
internet-explorer - IE 条件注释 : lt IE 7 = lte IE 6?
使用有什么区别吗 ... 或者 ... ? 最佳答案如果一种罕见的、神话般的浏览器被称为，就会有所不同。 Internet Explorer 6.66 被发现。关于internet-explor
html - IE 特定样式表打击其他版本的 IE
我试图在 IE7+8 中使用字体图标并遇到了一个问题，这个问题可以通过仅 IE7 的样式表轻松解决。长话短说，现在 IE7 和 IE9 都以某种方式运行我的仅 IE7 样式表(IE8 运行得很好)。我
php - 在 IE 8 中遇到问题对象需要错误，灯箱在 IE 8 和 IE 7 中不起作用
我实现了上传的图片显示在网站上。为了图片未正确上传意味着我将错误图片替换为那？当我加载网站时，我遇到了错误图像不存在的问题定义，并且灯箱在 chrome 和 firefox 中加载但它没有在
html - CSS 类在 IE 8 和 IE 9 中应用，但在 IE 11 中不应用
我有一个特殊的问题。我正在尝试“现代化”和为旧 IE 制作的旧应用程序，以便在 IE 11 中工作。但不知何故，CSS 类没有应用于 DOM 元素。 CSS 非常简单: .header { h
internet-explorer - IE 7 和 IE 8 是否仍然存在 IE 上 URL 的 2k 长度限制？
对于 IE 7 和 IE 8，IE 上 URL 的 2k 长度限制是否仍然存在？ (后 IE 6 时代) 最佳答案 http://support.microsoft.com/kb/208427 似乎它
css - Div 背景在 IE 7、8 和 IE 9 中不显示/在 IE 8 中没有滚动？
我们正在完善这个网站:dev.underglassframing.com 除了主要内容 div (#main) 后面的背景在 IE 7、8 和 9 中的内容之前停止外，在每个浏览器中一切都很好。我在末
internet-explorer - IE 11 border-radius 异常(在 IE 9 和 IE 10 中没有出现)
我在 IE 11 中搜索过与 border-radius 相关的类似问题，但是 only one found on the Microsoft IE Developer site描述了自从“升级”到
javascript - 有没有比这更好的方法(modernizr 7 KB javascript)为 IE 6、IE 7、IE 8 制作圆 Angular ？
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit th
CSS/IE - 在 IE 中选择内容时删除虚线
这个问题在这里已经有了答案: (CSS?) Eliminating browser's 'selected' lines around a hyperlinked image? (5 个答案) 关闭
html - 针对 IE 和 !IE
我知道有 1000 个问题，但我就是无法让它发挥作用。我只是想针对所有版本的 IE(包括 IE11)并给 html 一个特定的类，对于所有其他浏览器(firefox、opera、chrome)，我希望
c++ - 放大影响独立 IE 的嵌入式 IE
我有一个嵌入了 Internet Explorer 的程序。在某些情况下，我需要调整嵌入式 IE 的缩放级别。我正在使用带有 OLECMDID_OPTICAL_ZOOM 的 ExecWB 命令来执行
javascript - IE - 防止在 IE 中显示错误
我正在开发一个网络应用程序。我的应用程序在 chrome 和 firefox 上运行良好，但由于某种原因在 IE 中出现了一些错误。即使出现几个错误，应用程序仍然可以顺利运行，没有明显的问题。我想对

首页

博学

6Ren·AI

商城

html - 有没有办法解决 IE10&9 更宽的字体渲染差异？