Question

我有以下HTML和CSS代码。它在IE8中可以在一台机器上正常工作;但与IE8的第二台机器不一致。为了纠正它，需要改变什么？

注意：未对齐是针对“退出”文本。

注意：图像尺寸为214 X 57

注意：两个系统都具有相同的分辨率和100％的缩放比例。

enter image description here

<!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;

}

读：

Align contents inside a div

Answer 1

尝试将此元标记添加到您的头部：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

这应该阻止IE中的兼容模式并强制执行标准模式。

Answer 2

IE有一个兼容性视图按钮，检查两者是否都被选中。此按钮可更改IE兼容版本。

You can set differents css for differents versions：

<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]-->

Answer 3

只需更改

<a>Helpdsk Services Admins Site</a>

要 <a style="float:left;" >Helpdsk Services Admins Site</a>

无论如何为我工作（我以前遇到过这个问题），ie表示错误分配的一种方式，其他方式，它没有：

PS。如果你一直喜欢上课，那就为你做一个＆lt; a＆gt;标签

Answer 4

尝试使用以下内容并将其置于<div id="logo">

之上

<div id="signOut">
    <a id="LoginStatus1">Logout</a>
</div>

Answer 5

大多数当我看到这个时，用户会略微放大（或者外出，但通常都在），导致事情稍微偏斜。

仅在一台机器上的HTML对齐问题（均为IE8）

5 个答案: