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

IT技术 javascript asp.net html css jsp
2021-02-25 21:55:07

我有以下 HTML 和 CSS 代码。它在一台机器上的 IE8 中运行良好;但在第二台机器上与 IE8 未对齐。为了纠正它,需要改变什么?

注意:未对齐是针对“注销”文本的。

注:图片尺寸为 214 X 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>

主样式文件

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;

}

阅读:

  1. 对齐 div 内的内容

5个回答

尝试将此元标记添加到您的头脑中:

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

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

IE7 可以使用 <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="css/chooser_IE7.css" /> <![endif]-->
2021-04-16 21:55:07
任何可以使其在 IE7 中工作的解决方案(我还没有在 IE7 中测试过)?
2021-04-28 21:55:07
添加元标记有效。谢谢。这是一个很好的信息。但是,@Wolf-Kun 的回答更适合我的简单案例。
2021-05-13 21:55:07

IE 有一个兼容性视图按钮,检查两者是否都被选中。此按钮更改 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]-->
@Lijo,您可以根据 IE 版本配置 CSS 并测试兼容性检查或未检查
2021-04-16 21:55:07
你能告诉我需要什么改变才能使它适用于 IE7 吗?
2021-04-24 21:55:07
@Lijo 当 IE8 处于“兼容”模式时,它基本上是在模仿 IE7。你的页面在 IE7 中工作吗?
2021-04-26 21:55:07
我需要让它适用于所有设置。有多个用户使用自己的配置访问 websie。还有其他想法吗?
2021-04-27 21:55:07
它在另一台机器上的 IE6 中工作。我正在寻找一种解决方案,它适用于所有配置 > 1E6 的所有版本。这应该是可能的,因为这是一个基本的对齐问题。
2021-05-10 21:55:07

只是改变

<a>Helpdsk Services Admins Site</a>

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

无论如何对我有用(我以前遇到过这个问题),ie 显示错误的一种方式,另一种方式,它没有:

附注。如果您一直喜欢课程,只需为您制作一个 <a> 标签。

2021-05-08 21:55:07

尝试将其放在下方并将其放在上方 <div id="logo">

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

大多数时候我看到这个,用户被稍微放大(或缩小,但通常是放大)导致东西稍微歪斜。

两个系统都具有相同的分辨率和 100% 缩放。我们如何克服这个问题?
2021-04-16 21:55:07