发表新帖
发表新帖

IE9 bug with increased font-size of css content

前端 未结
关注
5 728
时光说笑
时光说笑 2020-12-09 18:41

I have found a bug in IE9 but googling for it hasn\'t helped finding any solution yet.

The following works fine in FF 3 + 4, Chrome, Opera and even IE8, but not in I

相关标签:
5条回答
  • 被撕碎了的回忆
    2020-12-09 18:42

    There is a work-around that allows font-sizes to be relative (em or %): add another class with the pseudo-element font-size reducing the size.

    I've put together a fiddle showing the workaround but the basic code is below:

    <p class="one">Test (1.25em = 20px)</p>
<p class="one two">Test (2em = 32px but 2.5em = 40px in IE)</p>
<p class="one one-ie two">Test (2em = 32px)</p>

    The styles then look like this:

    body {
    font-size: 16px;
}

.one::before {
    content:      "::before";
    font-family:  monospace;
    font-size:    1.25em;
    margin-right: 10px;
}

.one-ie::before {
    font-size: 0.8em;
}

.two::before {
    font-size: 2em;
}

    Most browsers will override the .one-ie::before selector with .two::before and IE's compounding will essentially negate the previous font-size. If IE fix the bug and allow pseudo-element styles to override rather than compound, the hack gets overridden like every other browser.

    0 讨论(0)
  • 别那么骄傲
    2020-12-09 18:46

    I see the test page "sit amet" as huge in Firefox 4.0.1. Are you sure this is IE only and not actual spec'd behavior?

    edit: and safari too. I'm on a Mac. I don't think this is an IE bug.

    0 讨论(0)
  • 感情败类
    2020-12-09 18:47

    This might have something to do with the difference between the parsed DOM trees from IE8 to IE9.

    Internet Explorer 8:

    • <html>
      • <head>
      • <body>
        • <div class="outer">
          • <p class="inner">
            • Text - Lorem ipsum dolar

    Internet Explorer 9:

    • <html>
      • <head>
      • <body>
        • Text - Empty Text Node
        • <div class="outer">
          • Text - Empty Text Node
          • <p class="inner">
            • Text - Lorem ipsum dolar
          • Text - Empty Text Node
        • Text - Empty Text Node

    Bonus Reading

    • Interoperable HTML Parsing in IE9
    0 讨论(0)
  • 情话喂你
    2020-12-09 18:56

    I've seen similar in other versions of IE using ems too. Try setting

    HTML {
    font-size: 100%;
}

    Should fix it!

    0 讨论(0)
  • 别那么骄傲
    2020-12-09 19:06

    You could try using rem instead of em, IE9 supports it, then your sizes will then be relative to the base font size instead of multiplying together. Here's a good explanation.

    I would guess the difference here is that IE9 is treating the generated content as a child element while the other browsers aren't, hence the multiplication.

    0 讨论(0)
 看不清?
提交回复
热议问题