CSS浏览器兼容性问题 [英] CSS Browser Compatibility issues
问题描述
我最近为客户设计了一个Web应用程序。我使用CSS的应用程序的布局。我测试了IE7，Mozilla 3.0.1，谷歌浏览器2.0.xxx，Safari 3.1和Opera 9.51的布局。
I recently designed a web application for a client. I used CSS for a layout of the application. I tested the layout on IE7, Mozilla 3.0.1, Google Chrome 2.0.xxx, Safari 3.1 and Opera 9.51.
它们都正确显示没有问题。在交付应用程序后，我的客户端注意到它与IE6的兼容性问题。网站无法正确显示。
They all displayed correctly without problems. After the delivery of the application my client noticed it had compatibility issues with IE6. The site was not displayed correctly.
如何解决这个问题？我没有在我的系统上的IE6，甚至尝试和解决它。每次我试图降级我的浏览器到IE6，IE将停止工作。有没有办法我可以得到一个环境，可以模拟IE6在线。
How do i get to fix this problem? I don't have IE6 on my system to even try and fix it. Each time i try to downgrade my browser to IE6,IE will stop working. Is there a way i can get an environment that can simulate IE6 online.
其次，利用css框架来解决兼容性问题，即使我想使用css框架，其中一个是更好的除了蓝图css。
Secondly, is making use of css frameworks going to solve the compatibility problem and even if i want to use a css framework, which one is better apart from blueprint css.
感谢您的时间。
推荐答案
我有一种感觉，你正在碰到一个盒子模型问题，因为你是在怪异模式下渲染。 IE7 +和所有其他浏览器使用 W3C框模型，而IE6在quirks模式下使用 IE框模型。
I have a feeling you are running into a box model problem because you are rendering in Quirks Mode. IE7+ and all other browsers uses the W3C box model while IE6 uses the IE Box Model in quirks mode.
IE框模型（称为传统框模型）在元素的宽度/高度中包含填充和边框。
The IE box model (known as the traditional box model), includes the padding and border in the width/height of an element.
IE框模型，一个宽度为100px，每边有2px填充，3px边框和每边7px边框的宽度为114像素的框。
Under the IE box model, a box having a width of 100px, with 2px padding on each side, a 3px border, and 7px margin on each side, will have a visible width of 114px.
W3C框模型（这是标准框模型）从元素的宽度/高度中排除了填充和边框。
The W3C box model (which is the standard box model), excludes the padding and border from the width/height of an element.
在W3C框模型下，宽度为100px，每边有2px填充，3px边框和每边7px边框的框将有124像素的可见宽度。
Under the W3C box model, a box having a width of 100px, with 2px padding on each side, a 3px border, and 7px margin on each side, will have a visible width of 124px.
为了使IE使用W3C框模型（这是其他浏览器使用的），您的网页需要以严格模式呈现。默认情况下，IE以Quirks模式呈现。
In order to make IE use the W3C box model (which is what every other browser uses), your page needs to be rendered in Strict mode. By default, IE renders in Quirks mode.
为了在IE中触发严格模式，必须指定一个doctype。您可以使用以下任何一种doctypes：
In order to trigger Strict mode in IE, you must specify a doctype. You can use any of the following doctypes:
HTML4严格：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd" >
XHTML 1.0严格：
XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0过渡：
XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
您的doctype必须是您的网页上首先显示的内容。它甚至在< html> 标签之前，在其自己的行。 （添加一个<？xml> prolog会导致IE回到怪异模式，所以如果你有一个删除它。）
Your doctype must be the first thing to appear on your page. It is even before the <html> tag, on its own line. (Adding an <?xml> prolog will cause IE to go back in Quirks mode, so remove it if you have one).
有关Quirks / Strict模式的详细信息：
More information about Quirks/Strict mode here:
虽然添加一个doctype来切换标准模式可能无法解决你的所有问题，你将至少采取一个巨大的步骤在正确的方向。
Though adding a doctype to toggle Standards mode might not fix all your problems, you will at least take a HUGE step in the right direction.
这篇关于CSS浏览器兼容性问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
