1

I've encountered an issue that is IE9-specific and need some assistance in order to get to the roots of it. We use SCSS on our project and as the project grows it sometimes appears that we have a files with deep trees.

Here is the SCSS construction that breaks the layout of the page (seems like the styles after this one are not applied at all):

.a {
  ...
  .b {
    ...
    .c, .d, .e, .f {
      ...
      .g {
        ...
        .h {
          ... 
        }
      }
    }
  }
}

Removing the class .h fixes the problem. Removing the class .f also fixes the problem.

This construction IE9 also don't like:

.a {
  ...
  .b {
    ...
    .c, .d, .e {
      ...
      .g {
        ...
        .h {
          ... 
        }
        .i {
          ... 
        }
      }
    }
  }
}

What could be the reason? I've checked that the issue is not dependent on the length of the class names.

2
  • Can you show us the compiled CSS?
    – Chris
    Aug 28, 2012 at 14:20
  • 2
    Please show HTML and CSS that demonstrate the issue. Aug 28, 2012 at 14:28

1 Answer 1

1

Thank you all for investigating. I've solved the problem while minimizing css file for uploading an example to jsFiddle. Actually we exceeded IE limit of 4096 selectors per stylesheet and that caused problems with the layout. I still don't understand why the same css-file works in IE8 although this browser claims to have the same selectors limit.

1
  • 1
    Please mark this answer as the correct one, so that the question will stop showing up in the unanswered list. Aug 29, 2012 at 16:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.