DOCTYPE tag in IE 9
In my web application I am using media player object in a jquery dialog.
When using DOCTYPE code i cant see the media player.Actually there is media player.While right click on that area , i will get corresponding menu.I can even see tooltip.But just the object is hidden ( cant see ) .
If i removed the DOCTYPE tag, then all things works as i expected. Any idea about this?
This only happens in IE 9
The code is shown below:
<!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' v开发者_Python百科alue='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>
If i removed the doctype , ie ,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
, i can see the player .But all alignment is gone.
Here i am attaching pics of both cases
1.While not using DOCTYPE
2.While using DOCTYPE
EDIT:
If i am not using jquery dilog ,its works fine .
I'd suggest using XHTML 1.0 Strict (if you don't want to use HTML5) instead of Transitional. That forces browser to standards mode instead of quirks mode (which could be the case with IE9):
http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict
http://www.quirksmode.org/css/quirksmode.html
Finally i find out the problem .The problem was with jquery.ui.all.css .
There is a sub css file named jquery.ui.dialog.css in the above css
and i changed the below line of code
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
to
.ui-dialog { position: absolute; padding: .2em; width: 300px; }
Now its works fine
加载中,请稍侯......
精彩评论