HTMLalignment问题只在一台机器上(包括IE8)
我有以下的HTML和CSS代码。 它在一台机器的IE8中工作正常; 但与IE8的第二台机器错位。 什么是改变,以纠正它?
注意:不alignment是“注销”文本。
注意:图像的尺寸是214×57
注意:两个系统的分辨率都是相同的,而且是100%缩放。
<!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>Helpdsk Services Admins Site </title> <link href="Styles/MasterStyle.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="container"> <div class="clear"> <div id="header"> <div id="logo"> <img alt="logo" src="Images/Logo.png" /> </div> <div id="titleInfo"> <a>Helpdsk Services Admins Site</a> <div id="signOut"> <a id="LoginStatus1">Logout</a> </div> </div> </div> </div> </div> </div> </body> </html>
MasterStyle.css
body { margin: 0px; padding: 0px; text-align: center; background: Orange; } #wrapper { width: 100%; height: auto; text-align:left; margin: 0 auto; background: Orange; } #container { width: 850px; height: auto; margin: 0 auto; background: white; } #header { width: 850px; height: 70px; background: white; padding: 0 0 10px 0; } #titleInfo { font:bold 18pt Arial; color:#2377D1; width:590px; height:35px; float:left; margin:10px 0 0 10px; border-bottom:3px solid #fcda55; padding: 10px 0 0 0; display:inline; } #signOut { font:bold 9pt Arial;float:right;border-bottom:none;padding: 0px 10px 0 0;display:inline; } #logo { width:200px; height:60px; float:left; margin:0 0 0 20px; display:inline; padding: 10px 0 0 0; } .clear { clear: both; }
读:
- alignmentdiv内的内容
只是改变
<a>Helpdsk Services Admins Site</a>
到<a style="float:left;" >Helpdsk Services Admins Site</a>
<a style="float:left;" >Helpdsk Services Admins Site</a>
对我来说,无论如何(我以前有过这个问题),一种方式显示misallign,另一种方式,它不:
PS。 如果你总是喜欢上课,那就给你一个<a>的标签。
尝试添加这个元标记到你的头上:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
这应该防止IE中的兼容模式,并强制标准模式。
IE浏览器有一个兼容性视图button,检查两者是否被选中。 该button更改IE兼容版本。
你可以为不同的版本设置不同的CSS :
<link rel="stylesheet" type="text/css" href="css/chooser.css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="css/chooser_ie.css" /> <![endif]--> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="css/chooser_IE6.css" /> <![endif]-->
尝试下面,并把它放在<div id="logo">
之上
<div id="signOut"> <a id="LoginStatus1">Logout</a> </div>
大多数时候,我看到这个,用户稍微放大(或出,但通常在)导致的东西稍微歪斜。