How to load css3 pie only for ie7 and 8? But not f

2019-02-19 07:49发布

站内文章 / HTML/CSS
51 0 0

问题:

This is css to use CSS3 PIE

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
background: #EEFF99;
behavior: url(/PIE.htc);

Specially

behavior: url(/PIE.htc);

My question is will this PIE.htc be downloaded by all browser or only in IE 7 and 8?

I need to show round corner in IE7 and 8 too. So i thought instead of using Modernizr and writing another class and and image for round corner, CSS3 PIE will be good solution because whenever we will change the color and thickness of border and height of element PIE.htc will render same in IE7 and 8 without. but in the case of Modernizr and and image we will have to use upload new image for new we will have to change and upload new change.

And because I'm using Modernizr for this only I cannot load in conditional comment it will load for every browser even i don't need. So i thought if CSS3 PIE is good for flexibility and if it will only load to IE7 and 8 it will be good to use in this particular case.

回答1:

behavior is not a valid CSS property and will be ignored by browsers other than Internet Explorer. They will not download the PIE.htc file.

You mention you cannot load in conditional comment, but if you can use conditional comments (?), then you can do the following trick:

<!doctype html>
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
<head>

In this case you are using conditional comments, but you are not loading anything inside the comments. You are merely adding a browser-specific class to the <html>-element. Now you can do this in your CSS:

.some-class {
  border-radius: 12px;
}
.ie7 .some-class, .ie8 .some-class {
  behavior: url(/PIE.htc);
}


标签： css internet-explorer cross-browser modernizr css3pie
举报

收藏的人(0)

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