rem 在ie上的显示问题

Posted 2023-05-15

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了rem 在ie上的显示问题相关的知识，希望对你有一定的参考价值。

参考技术A 最近写的一个响应式页面，需要兼容ie浏览器，我就在里面用到了rem，先解释下

使用的过程中在其他现代浏览器下都没有问题，然后当我切到ie的时候，神奇的事情发生了。当我屏幕缩小到很小，然后刷新页面，之后把页面全屏的时候就会发现本来排列很好的页面突然就变得很乱。

这个问题困恼了蛮久，一开始以为是浏览器的渲染问题，因为这种画面只有在同时满足下面两种情况下才会出现

即使满足这种情况，这种现象也不稳定，只要我们鼠标在页面上随便点一下，或者刷新一下页面就恢复正常了

后来经过查找发现居然是因为body的font-size 影响了页面，我们这要在body的标签里添加font-size=100%

这个问题就迎刃而解

Font Awesome 字体在 IE8 上显示为框

【中文标题】Font Awesome 字体在 IE8 上显示为框【英文标题】：Font Awesome fonts show up as boxes on IE8 【发布时间】：2012-08-21 06:04:15 【问题描述】：

所以我在一个项目中使用 Font Awesome，在测试中我遇到了 IE8 的问题。

在 Windows IE9 上，Chrome 和 Firefox 可以正确显示字体（OS X 上的 Firefox、Chrome 和 Safari 也是如此），但 Windows 上的 IE8 会出现一个问题，即我得到一个框来代替字体。

我的代码是：

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <title>Site title</title>

    <!--[if lt IE 9]>
        <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link href=".../css/css.css" rel="stylesheet" type="text/css">
    <link href="../css/print.css" rel="stylesheet" type="text/css" media="print">

    <link href="../apple-touch-icon.png" rel="apple-touch-icon-precomposed">
    <link href="../css/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css">
    <link href="../css/jquery-ui-overrider.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato|Michroma&subset=latin&v2" rel="stylesheet" type="text/css">
    <link href="../css/prettify.css" rel="stylesheet" type="text/css">
    <link href="../css/font-awesome.css" rel="stylesheet" type="text/css">
    <!--[if IE 7]>
        <link href="../css/font-awesome-ie7.css" rel="stylesheet">
    <![endif]-->

我有四个字体文件...

fontawesome-webfont.eot fontawesome-webfont.svg fontawesome-webfont.ttf fontawesome-webfont.woff

...它们所属的地方并且它们可以被世界读取（755 权限）。我错过了什么？我必须对 IE8 中的兼容性视图做些什么吗？

同一台计算机可以很好地查看 Font Awesome 网站上的字体，所以一定是我做错了。

根据要求，font-awesome.css 的副本在这里：font-awesome.css。除了字体文件的路径之外，它或多或少是我从他们那里下载的。

基于@Abody97，我将https://html5shim.googlecode.com/svn/trunk/html5.js 添加到组合中（上面的代码已更新）。即使在刷新和删除缓存刷新之后仍然没有运气。

【问题讨论】：

可以看到font-awesome.css的内容吗？问题很可能在那里......另外，IE8 将使用eot 文件，而 ie9 可能使用woff。我的猜测是 css 文件的 eot 或类似文件的路径错误。 @Nico Burns - 我更新了帖子以包含指向 .css 文件副本的链接您确定浏览器中的编码设置为 UTF-8 吗？ @Abody97 - 我不能肯定我有那一套。这是我在 IE8 中设置的吗？（不能说我以前做过）我的印象是为我做的...... @Jason 通常在Page 菜单-> Encoding。默认情况下它设置为 UTF-8，但要格外确定也无妨。 【参考方案1】：

我遇到了同样的问题并找到了解决方案，我会在这里发布以防有人仍然需要它。

问题是 IE 无法加载字体文件，它正在构建返回 404 错误的奇怪 GET 请求。

使用此处找到的技巧：http://www.fontspring.com/blog/fixing-ie9-font-face-problems 我能够解决此问题。

将?#iefix 添加到包含字体的CSS 中的eot url（在本例中为font-awesome.css）

@font-face 
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

【讨论】：

另一个问题是使用 HTTP: 或 HTTPS: ... @fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.5.0/fonts" 引用路径如果您删除 http: 或 https: 则有效【参考方案2】：

这似乎是一个非常普遍的问题，据此discussion 与使用 :before 附加的字符有关。实际上，我发现让它在 IE 8 中工作的最简单方法是不使用 fa-name 类并手动插入字符。

例如而不是：

<i class="fa fa-user fa-lg"></i>

使用：

<i class="fa fa-lg">&#xf007;</i>

字符代码可以在Font Awesome Cheatsheet 上找到。无论 IE 版本如何，这似乎一直有效。

希望这对某人有所帮助，

杰森

【讨论】：

这是在 ie8 中唯一对我有用的东西。谢谢这对我的情况没有帮助（ie9）。谢谢，这个解决方案适用于我大部分时间都有效的问题，仅在第一次加载没有缓存的页面时显示方框。【参考方案3】：

尝试在添加 CSS 之前将其添加到您的 head：

<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

【讨论】：

我刚试过（检查我上面的代码更改）没有运气。唯一的区别是我使用了html5shim.googlecode.com/svn/trunk/html5.js，因为我只需要它是 https 流量。 @Jason 您能否提供指向您网站的实时链接？这真的很奇怪。不幸的是我不能 - 它不公开。自从我在 IE8 中访问 Font Awesome 网站时获得了字体，我觉得我错过了一些非常基本的东西。 @Abody97 我建议更改删除 http: 部分，以便此代码在从 https 页面加载时不会发出安全警告。 "" 更好的是，我建议大家下载一个发布版本的 html5.js 源并包含这个文件，而不是总是从主干中提取。 code.google.com/p/html5shim【参考方案4】：

刚刚遇到同样的问题，通过将 IE8 的“安全级别”设置为低于“高”的值来解决它。

一般来说，我可以通过使字体文件（eot、woff、ttf...）“不可用”（例如导致 404 响应）来重现“框” - 所以我假设，在安全级别“高" 他们只是没有加载...

【讨论】：

【参考方案5】：

事实证明，包含文件生成了一个额外的 <html> 标签，这是我的问题的根源。所以，在我的最终文件中，我同时拥有<html lang="en"> 和<html> 额外的<html> 标签将IE 扔进怪癖模式，这导致了我遇到的字体真棒图标问题。

消除那个流氓<html> 并验证我的标题设置是否正确为我修复了所有问题。

我现在在所有页面上使用一组样板的标题标签：

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>    
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta charset="utf-8" />

在我把这个放在一页之前：

<!DOCTYPE html>
<html lang="en">
<html>  <!-- This tag was causing the problem, removing it solved things for me -->
<head>    
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta charset="utf-8" />

【讨论】：

那个额外的标签是什么？我也有类似的问题。我也是。我也有同样的问题。问一个问题，回答它而不给出任何解决方案，检查答案是否正确...arrrg。【参考方案6】：

将响应标头中的缓存控件设置为字体文件的私有，对我来说在 IE8 中效果很好。可以在此处找到更多解释 - 他解释了他如何解决 PDF 文件 (Can't display PDF from HTTPS in IE 8 (on 64-bit Vista))。

希望这会有所帮助。

【讨论】：

这在我进行了几个月的故障排除后解决了。干杯。【参考方案7】：

在 IIS（MVC 环境）下，我必须将以下规则添加到我的 Web.config：

   <system.web>
    <httpHandlers>
      <add verb="GET" path="*.eot" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.svg" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.ttf" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.woff" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.otf" type="System.Web.StaticFileHandler" />
    </httpHandlers>
  </system.web>

【讨论】：

【参考方案8】：

IE 9 版本以下不支持woff 文件格式。可能这就是为什么您无法在 IE8 上获取它们的原因

【讨论】：

【参考方案9】：

唯一对我有用的是：

https://github.com/FortAwesome/Font-Awesome/issues/2324

结合杰森的另一个回答：例如而不是：

<i class="fa fa-user fa-lg"></i>

使用：

<i class="fa fa-lg">&#xf007;</i>

【讨论】：

【参考方案10】：

不只是IE，所有浏览器都有同样的问题。

有趣的是，您需要将文件放在正确的位置。

这意味着您需要以下结构：

folder levels look like this:

    level 1                 level 2  level 3

----index.html 

----font-awesome-4.2.0  ----css ---- fontawesome.css

                        ----css ---- fontawesome.min.css 

                        ----fonts----... 

                                 ----... 

                        ----...

然后将链接 sylte 放在 index.html 中作为

<link rel="stylesheet" href="./font-awesome.min.css"> 在头部之间

一个非常重要的注意事项是：不要尝试组合 fontawesome 文件夹和任何其他文件夹。将它们分开。

现在测试一下，一切顺利。

【讨论】：

以上是关于rem 在ie上的显示问题的主要内容，如果未能解决你的问题，请参考以下文章

网站上的嵌入字体不会在 IE 或 Chrome 中显示

Chrome 和 IE8 上的 Jcrop 问题 - 仅在页面刷新时才显示裁剪

UEditor在IE上的显示问题: 大家好，我新入职IT公司，再用UEditor编写一个JSP页面控件的时候显示不出来。

Font Awesome 字体在 IE8 上显示为框

rem em px 单位换算

关于rem自适应的一点研究