HTML5 elements working in Chrome but not Safari or

2019-04-16 04:10发布

站内文章 / HTML/CSS
42 0 0

问题:

I'm using the HTML5 elements and in a project i'm working on and the css seems to be working fine in Chrome. However, it doesn't appear to be working in Safari or Firefox (I haven't tested IE, but I'd imagine it's the same), and the page layout is all over the place.

Any ideas why this may be? I know Firefox and Safari both support these elements, and Safari is webkit-based like Chrome, so I can't figure out what the problem is.

You can see the webpage here. {website link not available}

回答1:

Safari and Firefox have the same level of ‘support’ for HTML5 sectioning elements (after seeing your demo page, I’m guessing these are the elements you’re talking about): they can be styled, but you have to set display: block; implicitly.

aside, article, section { display: block; }

Adding this rule to your CSS will solve the problem.

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

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


回答2:

Which part isn't working exactly? The <canvas> element appears to be rendering correctly, your <article> container isn't being ignored.

I'm in FF3.6.2, btw. The only CSS errors I see are just that: CSS errors.



回答3:

I had a problem with "figure" element, not showing background image. so i overcome the problem with this...

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

This didn't work... background: rgba(0, 0, 0, 0) url("../img/login_bg.jpg") scroll center center / cover ;



标签： css firefox html5 google-chrome safari
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~