All geek questions in one place

IE8, HTML5 and combined classes ala.class1.class2 {}

I make a responsive website and periodically do things like this:

.someclass {} .someclass.with_context {}

IE8 does not recognize the second class. IE9 does.

I use doctype HTML5 and it uses IE8 standard mode as the default.

Any ideas?

+4
source share
3 answers

CSS Tricks has a good article on using multiple classes / identifiers. From what I read, it is supported by most browsers (including IE7 - not IE6).

Of course, QuirksMode also contains a short article.

If you are using HTML5, are you using Shiv ( headjs or Modernizr or some other way for CSS to recognize HTML5 elements )?

Can you give a jsFiddle example?

Or is it just a typo?

Is your HTML like this?

 .someclass {} .someclass.with_context {} <div class="someclass with_context">Hello World</div>

or is that so?

 .someclass {} .someclass .with_context {} <div class="someclass"> <div class="with_content">Hello World</div> </div>

EDIT

Perhaps you need to make the HTML5 block level:

 header,nav,article,footer,section,aside,figure,figcaption{display:block}
+3
source

I will continue if I can find a few minutes to find out the details of the behavior, but here is what I found out:

As we all knew, IE8 really supports

 .myClass.anotherClass {}

just fine.

Facebook used for you to use

 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

use as buttons, etc. This caused a very strange edge case behavior, and switching to their "HTML5" / javascript-like modules makes it extraneous.

The thing that ultimately did this - and the interesting part - is that some of the uses were inside media queries, which seems to matter. When I have more time to check and track them, I will give details.

Thanks for your suggestions.

0
source

I assume you mean your css

something like that

 <article class="someclass"> <section class="with_context">something here</section> </article>

Note that the above may use standard divs instead of HTML5 tags

anyway your CSS needs space between two classes

 .someclass {SOME CSS} .someclass .with_context {SOME CSS}
-2
source

Source: https://habr.com/ru/post/1383244/

More articles:


All Articles