All geek questions in one place

HTML5 elements working in Chrome but not Safari or Firefox?

I use HTML5 elements in both the project I'm working on and css seems to work fine in Chrome. However, it doesn't seem to work in Safari or Firefox (I haven’t tested IE, but I would have done it myself), and the page layout is everywhere.

Any ideas why this could be? I know that Firefox and Safari support these elements, and Safari is based on webkit, such as Chrome, so I can not understand what the problem is.

You can see the web page here . {link to site unavailable}

+1
source share
3 answers

Safari and Firefox have the same level of support for HTML5 sequence elements (after viewing your demo page, I assume these are the elements you are talking about): they can be styled, but you must set display: block; implicitly.

 aside, article, section { display: block; }

Adding this rule to your CSS will help solve the problem.

To make these elements stylish in IE, you just need to use HTML5 shim / shiv. Add the following HTML to your <head> :

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

Which part does not work for sure? The <canvas> looks right, your <article> container is not ignored.

I'm in FF3.6.2, by the way. The only CSS errors that I see are simple: CSS errors.

0
source

I am having a problem with the "figure" element not displaying a background image. so I am overcoming the problem with this ...

 background-image:url("../img/login_bg.jpg"); background-position:center center ; background-repeat:no-repeat; background-size:cover;

This did not work ... background: rgba (0, 0, 0, 0) url ("../img/login_bg.jpg") center / scroll wrap;

0
source

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

More articles:


All Articles