简体   繁体   English

在IE9中使用html5怪癖模式

[英]Using html5 quirks mode in IE9

I've created a form that is dynamically created with JavaScript and is added in another website using the <script> tag. 我创建了一个使用JavaScript动态创建的表单,并使用<script>标记添加到另一个网站中。

The doctype used by this other website is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> which uses the quirks mode. 这个其他网站使用的doctype是<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ,它使用了怪癖模式。

I've built my form by taking this in consideration and everything is working as expected in Chrome, Firefox and IE 10. However, when I test it in IE 9 and earlier, the form is not displayed at all. 我已经考虑到这一点构建了我的表单,所有内容都在Chrome,Firefox和IE 10中按预期工作。但是,当我在IE 9及更早版本中测试它时,表单根本不会显示。 When I open the developper tools, I can see that IE 10 uses the new quirks mode but IE 9 and earlier uses the IE5 Quirks mode. 当我打开开发工具时,我可以看到IE 10使用新的怪癖模式,但IE 9及更早版本使用IE5 Quirks模式。

I was wondering if the new quirks mode can be used to display this page when using IE 9 and earlier. 我想知道在使用IE 9和更早版本时是否可以使用新的怪癖模式来显示此页面。 If this is not possible, I would like to force standard mode but only when using IE 9 or earlier and keep using quirks for every other browser. 如果这是不可能的,我想强制标准模式,但仅在使用IE 9或更早版本时,并继续使用其他浏览器的怪癖。

I can't use the html5 doctype since their website is built with quirks mode instead of standards and their design is all broken when I use this doctype. 我不能使用html5 doctype,因为他们的网站是用怪癖模式而不是标准构建的,当我使用这个doctype时,它们的设计都被破坏了。

You cannot change the mode once the page is loaded. 加载页面后,您无法更改模式。 And you cannot change it programmatically. 而且你不能以编程方式改变它。 The only way to force a page into quirks mode is to load it without a valid doctype or with serious bugs in the HTML. 强制页面进入怪癖模式的唯一方法是加载它而没有有效的doctype或HTML中的严重错误。

If you have a doctype, but your page is still loading in quirks mode, then it means that you have serious bugs in your HTML. 如果您有doctype,但您的页面仍然以怪异模式加载,那么这意味着您的HTML中存在严重错误。 This will give you bigger problems than just being in quirks mode. 这将给你带来更大的问题,而不仅仅是在怪癖模式。 You should definitely fix those bugs. 你应该肯定修复这些错误。 If you really want to be in quirks mode, drop the doctype, but you should really try not to have HTML code that is so bad it triggers quirks mode even with a doctype! 如果你真的想要处于怪癖模式,请删除doctype,但你应该尽量不要使用非常糟糕的HTML代码,即使使用doctype也会触发怪癖模式!

You can validate your HTML to find those bugs by using the W3C validator . 您可以使用W3C验证程序验证HTML以查找这些错误。

In terms of switching your page at runtime between IE10's two different quirks modes, the simple answer is that you can't do that. 在运行时在IE10的两种不同怪癖模式之间切换页面方面,简单的答案是你不能这样做。

Sorry about that. 对于那个很抱歉。

However, to be honest, it's probably for the best. 但是,说实话,它可能是最好的。 Using quirks mode is be a complete disaster anyway. 无论如何,使用怪癖模式是一场彻底的灾难。 It doesn't just change the layout mode; 它不只是改变布局模式; it also switches off most of the browser's features (ie pretty much everything invented since 1998). 它还关闭了大多数浏览器的功能(即自1998年以来发明的几乎所有功能)。

But now for the good news: 但现在好消息:

Luckily, switching away from Quirks mode is a lot easier than you think. 幸运的是,远离Quirks模式比你想象的要容易得多。

The main layout issue (the different box model) can be fixed by adding the following to the top of your CSS: 可以通过在CSS的顶部添加以下内容来修复主要布局问题(不同的框模型):

*{box-sizing:border-box;}

This is the standards-compliant way to set the box model to the quirks-mode style layout. 这是将盒子模型设置为怪癖模式样式布局的符合标准的方法。 Most of the broken layout problems cause by switching from quirks mode to standards mode can be resolved with this simple CSS style. 通过这种简单的CSS样式,可以解决从怪异模式切换到标准模式导致的大多数破坏的布局问题。

There are other quirks, but they're relatively minor and shouldn't be too hard to deal with once you've fixed the main issue. 还有其他的怪癖,但它们相对较小,一旦解决了主要问题,就不应该太难处理。 A lot of them are actually not quirks mode issues, but bugs in older IE versions that the original coder may have had to hack his way around. 其中很多实际上并不是怪癖模式问题,但是原版编码器可能不得不破解其中的旧IE版本中的错误。 There's no guarantee that these will continue working the same in future versions anyway, even if you do stick to quirks mode, so you would be best off fixing them now anyway. 无论如何,即使您坚持使用怪癖模式,也无法保证这些版本在未来的版本中将继续保持相同的工作状态,因此无论如何您最好立即修复它们。

So, to summarise: 所以,总结一下:

  1. Fix your page so it loads in standards mode. 修复您的页面,使其以标准模式加载。 Valid doctype and valid HTML. 有效的doctype和有效的HTML。
  2. Use box-sizing to mitigate the main layout gremlins caused by the switch. 使用box-sizing来缓解由交换机引起的主要布局gremlins。
  3. Fix the remaining layout issues manually. 手动修复剩余的布局问题。

It's really a lot less work than it sounds. 这听起来真的要少得多。 Honest. 诚实。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM