IE 9 中的 DOCTYPE 标签答案

【问题标题】：DOCTYPE tag in IE 9IE 9 中的 DOCTYPE 标签
【发布时间】：2011-10-10 06:16:22
【问题描述】：

在我的 Web 应用程序中，我在 jquery 对话框中使用媒体播放器对象。

当使用 DOCTYPE 代码时，我看不到媒体播放器。实际上有媒体播放器。右键单击该区域，我会得到相应的菜单。我什至可以看到工具提示。但只是对象被隐藏（看不到）。

如果我删除了 DOCTYPE 标签，那么一切都会按我的预期工作。有什么想法吗？

这只发生在 IE 9

代码如下：

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1"><title>
    Test 
    </title>
       <link href="jquery.ui.all.css" rel="stylesheet" type="text/css" />
     <script src="jquery_1_4_4.js" type="text/javascript"></script>
     <script src="jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>

    <script language="JavaScript" type="text/javascript">
       $(document).ready(function () {



    $("#player").dialog();
 });

</script>
</head>
<body>

<div id="player">
test

    <object id='mPlayerCallTranscription' classid='CLSID:6BF52A52-394A-11d3-B153-

00C04F79FAA6'
                                    type='application/x-oleobject' height="42" width="250">
                                    <param name='AllowHideDisplay' value='True' />
                                    <param name='AllowHideControls' value='True' />
                                    <param name='URL' value="sdsd" />
                                    <param name='AutoStart' value='false' />
                                    <param name='balance' value='0' />
                                    <param name='enabled' value='True' />
                                    <param name='fullScreen' value='False' />
                                    <param name='playCount' value='1' />
                                    <param name='volume' value='100' />
                                    <param name='rate' value='1' />
                                    <param name='StretchToFit' value='True' />
                                    <param name='enabledContextMenu' value='True' />
                                    <param name='MovieWindowSize' value='0' />
                                    <param name='DisplayMode' value='0' />
                                    <param name='ShowControls' value='True' />
                                    <param name='ShowDisplay' value='False' />
                                    <param name='windowlessVideo' value='True' />
                                    <param name='uiMode' value='full' />
                                    <%--   !IE--%>
                                    <object type="video/x-ms-wmv" data="asds" width="251" 

id="mPlayerCallTranscriptionMozilla"
                                        height="42">
                                        <param name="src" value="sds" />
                                        <param name="autostart" value="false" />
                                        <param name="controller" value="true" />
                                        <param name="ShowControls" value="true" />
                                        <param name="BufferingTime" value="2" />
                                        <param name="fullScreen" value="false" />
                                        <param name="ShowStatusBar" value="true" />
                                        <param name="AutoSize" value="false" />
                                        <param name="InvokeURLs" value="false" />
                                    </object>
                                </object>
</div>
</body>
</html>

如果我删除了文档类型，即，

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

，我可以看到播放器。但是所有对齐都消失了。

这里我附上两个案例的图片

1.不使用DOCTYPE时

2.使用DOCTYPE时

编辑：

如果我不使用 jquery dilog，它可以正常工作。

【问题讨论】：

你为什么使用 frameset Doctype？你为什么不用<audio>？
@Quentin，我们没有使用 HTML 5。 DOCTYPE 有什么问题吗？
——您没有框架集文档。
@Quentin <audio> 不受 IE8 支持，并且它支持的音频类型因浏览器而异。 stackoverflow.com/questions/1007223/… 但是 Frameset Doctype 是完全错误的。 :)
这是我输入问题时的错误。我已经更新了我的问题

标签： jquery html jquery-ui dialog media-player

【解决方案1】：

我建议使用 XHTML 1.0 Strict（如果您不想使用 HTML5）而不是 Transitional。这迫使浏览器进入标准模式而不是怪癖模式（IE9 可能就是这种情况）：

http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict

http://www.quirksmode.org/css/quirksmode.html

【讨论】：

XHTML 1.0 过渡文档类型强制浏览器使用标准模式（或几乎标准模式，但从不怪癖模式）。 developer.mozilla.org/en/Mozilla%27s_DOCTYPE_sniffing
确实如此。实际上，原始海报上似乎发生了相反的情况-删除文档类型后，一切正常。

【解决方案2】：

最后我发现了问题。问题出在jquery.ui.all.css 上。

上面的css中有一个名为jquery.ui.dialog.css的子css文件

我更改了下面的代码行

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }

到

.ui-dialog { position: absolute; padding: .2em; width: 300px; }

现在可以正常使用了

【讨论】：