IE7 Compatibility Issues

2019-05-14 10:38发布

站内问答 / HTML/CSS
931 5 5

I'm (obviously) new to web development, and I'm just now realizing that my sites are pretty screwed up in some IE versions, but how do I fix them? How do I know what to change in the CSS and where, when multiple layers and divs aren't displaying properly?

Example: http://www.jwstudio.us/bkpa

Is there a resources for IE CSS fixes/compatibility? What about for the positioning and color differences between Safari/Apple and Windows browsers?

5条回答
混吃等死
2楼-- · 2019-05-14 11:19

Here are two reliable resources in addition to quirksmode that Rich B. mentioned

http://haslayout.net/css/

http://www.positioniseverything.net/explorer.html

Have fun. ;)

Another more standard use of conditional comments is to place links to ie-specific style sheets inside. (instead of changing the body classes—but that's a really interesting method that I haven't seen before!)

查看更多
0人赞 添加讨论(0) 举报
孤傲高冷的网名
3楼-- · 2019-05-14 11:24

First of all you should be using a reset of some sort. A CSS reset will make the playing field much more level when coding cross-browser.

See: http://developer.yahoo.com/yui/reset/

Ideally you want to avoid using browser-specific style sheets. If you code well you won't need them.

When creating a website you should check it regularly in each browser as you add code. Otherwise you may end up with a snowball effect of poor code. As you become familiar with the IE quirks you'll code cross-browser more efficiently.

Also I would avoid using so many position attributes (i.e. "position: relative"). Your layout is pretty basic; there should be no reason for so many. If you're relying on them so heavily you should reconsider how you structure your code.

查看更多
0人赞 添加讨论(0) 举报
女痞
4楼-- · 2019-05-14 11:30

Few tips:

Read http://quirksmode.org/ – loads of useful info on there.

Don't worry about things looking exactly the same, IE 6,7 and 8 are pretty out of date, and there are very real bugs in the way they render pages. Your code can be correct, and still look wrong in IE.

Instead of writing <body>, write:

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> 
<!--[if IE 7 ]>    <body class="ie7"> <![endif]--> 
<!--[if IE 8 ]>    <body class="ie8"> <![endif]--> 
<!--[if IE 9 ]>    <body class="ie9"> <![endif]--> 
<!--[if gt IE 9]>  <body> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->

Then, in your CSS you can write things like:

.someclass {
    loads of normal CSS
}

.ie6 .someclass {
    position:relative;
    top:-20px;
}

If you wanted to move something up 20px, but only in IE6. This helps you target old browsers with minimal hassle, and without worrying that you are screwing things up in other places!

Use scripts like ie9.js to upgrade older IE to use many features from later IEs, as well as fixing some of the stupider bugs. CSSPie is another useful tool for getting border-radius, box-shadow and gradients to work in these ancient browsers!

Color differences will likely be because your images include a color profile, use something like imageoptim (OSX) to strip out extraneous info such as this before putting online, or save them for Web from Photoshop.

Hope that's useful!

查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
5楼-- · 2019-05-14 11:30

There are a number of solutions that you could try.

First, you could make a separate stylesheet just for Internet Explorer, which is what I do on majority of my sites. You would include it with the following code:

<!-- [if IE]>
<link type="text/css" rel="stylesheet" href="/path/to/style.css" />
<[endif]-->

Second, Google manages something called the 'Chrome Frame,' which is basically just a Chrome browser in IE. It's a little more demanding on the client-side, but it fixes a vast majority of problems that IE has with rendering.

You can find more information on the Chrome Frame here.

Edit:

I would also recommend ditching support for IE6, seeing as the browser is roughly 10 years old, and most people have upgraded by now.

查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
6楼-- · 2019-05-14 11:37

Resources you will need:

Firstly, some sites with compatiblity charts to show you what features will work in various browsers:

  1. Quirksmode.org - http://www.quirksmode.org/css/contents.html
  2. CanIUse.com - http://caniuse.com/

Next, places to go for some hacks ("Polyfils") to improve compatiblity:

  1. Modernizr - http://modernizr.com/
  2. CSS3Pie - http://www.css3pie.com/
  3. Dean Edwards' IE7.js - http://code.google.com/p/ie7-js/
  4. Modernizr's collection of Polyfills - https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Finally, if you're not using it already, I recommend JQuery. It's a Javascript library that deals with a lot of the compatiblity issues.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)