Question

在我的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，即

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

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

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

1.不使用DOCTYPE

enter image description here

2.使用DOCTYPE时

enter image description here

修改

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

Answer 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

Answer 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; }

现在它的工作正常

IE 9中的DOCTYPE标记

2 个答案: