仅在一台机器上的 HTML 对齐问题(均为 IE8) [英] HTML Alignment Issue in one machine only (both IE8)

查看：14
本文介绍了仅在一台机器上的 HTML 对齐问题(均为 IE8)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下 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 服务管理员站点 </title><link href="Styles/MasterStyle.css" rel="stylesheet" type="text/css"/><身体><div id="包装器"><div id="容器"><div class="clear"><div id="标题"><div id="标志"><img alt="logo" src="Images/Logo.png"/>

<div id="titleInfo"><a>Helpdsk 服务管理员站点</a><div id="signOut"><a id="LoginStatus1">注销</a>

MasterStyle.css

正文{边距:0px；填充:0px；文本对齐:居中；背景:橙色；}#包装器{宽度:100%；高度:自动；文本对齐:左；边距:0 自动；背景:橙色；}#容器{宽度:850px；高度:自动；边距:0 自动；背景:白色；}#header{宽度:850px；高度:70px；背景:白色；填充:0 0 10px 0；}#titleInfo{字体:粗体 18pt Arial；颜色:#2377D1；宽度:590px；高度:35px；向左飘浮;边距:10px 0 0 10px;边框底部:3px 实心 #fcda55;填充:10px 0 0 0；显示:内联；}#登出{字体:粗体 9pt Arial;float:right;border-bottom:none;padding: 0px 10px 0 0;display:inline;}#标识{宽度:200px；高度:60px；向左飘浮;边距:0 0 0 20px；显示:内联；填充:10px 0 0 0；}.清除{清楚:两者；}

<小时>

阅读:

  1. 对齐 div 内的内容

<小时>

解决方案

只需更改

Helpdsk 服务管理员网站

到

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

附注.如果你一直喜欢上课，那就为你做一个标签.

I have the following HTML and CSS code. It works fine in IE8 in one machine; but misaligns in second machine with IE8. What is to be changed in order to correct it?

Note: The misalignment is for the "Logout" text.

Note: The dimension of the image is 214 X 57

Note: Both systems are in same resolution and 100% zoom. 

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

}

READING:

  1. Align contents inside a div

解决方案

Just change

<a>Helpdsk Services Admins Site</a>

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

Works for me anyhow (I've had this issue before), one way the ie shows misallign, other way, it doesn't:

PS. If you prefer classes all the time, just make one for you <a> tag.

这篇关于仅在一台机器上的 HTML 对齐问题(均为 IE8)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆