Question

我真的很喜欢这个。

除了IE7之外，该网站看起来很棒，我已经尝试了所有我知道的内容。

http://talentforceinc.com/Employer_Home.html

我已经为IE声明了条件CSS，并添加了内联text-align：center标签，但由于未知原因，左侧多色条中的文本不居中。

有什么想法吗？

是的，我现在知道这些代码很难看 - 但是在我试图集中精力的过程中，这些代码都变得很糟糕。

提前感谢任何输入。

IE开发者工具与Firebug不同....

Answer 1

作为参考，所引用的页面位于此处：http://talentforceinc.com/Employers_Home.html。

此处提到的具体代码如下：http://www.i-simplyrecruit.com/isrjobs/talentforce/ShowJobColors.asp并在下面显示以供参考。

第一个问题是（如你所提到的），代码很难看。事实上很丑陋，很难看出：

“固井服务...”和“文档布局专家”单元格中有未完成的HTML空间实体（＆amp; nbsp;）。这导致后面的结束标记的一部分被忽略。
宽度和高度的HTML属性仅为整数值。不要指定“px”。恩。 450而不是450px。
结束＆lt; div＆gt;每个单元格中的标签（具有一类“侧边栏”）放置在结尾＆lt; td＆gt;之后。和＆lt; tr＆gt;。

修复这些错误之后，我还注意到您将表格宽度设置为185，并且每个表格单元格宽度设置为100.这样可以防止表格单元占据表格的整个宽度，使文本在它们无法在桌子的宽度范围内居中。删除单元格宽度可以解决此问题。

我上传了一个测试页面，其中包含原始未经修改的代码以及我的更改结果：http://demo.raleighbuckner.com/so/1303302/

原始HTML供参考：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://demo.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Latest Jobs</title>
<link href="http://www.talentforceinc.com/talentforce.css" rel="stylesheet" type="text/css" />
<!--[if LTE IE 7]>
<link href="http://www.talentforceinc.com/talentforce_IE.css" rel="stylesheet" type="text/css" />
<![endif]-->
<style type="text/css">
<!--
td {
text-align: center;
align: center;
}
-->
</style>



<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}

function ShowMore(pID)
{
  var pParm = "Candidates_jobSearch3.asp?id=" + pID;

  MM_openBrWindow(pParm,"jobDetail","scrollbars=yes,width=600,height=600 resizable=no");
}
//-->
</script>

</head>
<body> 
   <table width=185px bgcolor=white border=0 cellpadding=0 cellspacing=0 style='text-align:center'><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#00AADD'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;P0006008-0032&quot;);'>Contractor&nbsp;Engineer&nbsp;Specialist</a></div></td></tr></div><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#AADDEE'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;N0003008-0077&quot;);'>.Net&nbsp;&&nbsp;Sql&nbsp;server&nbsp;An</a></div></td></tr></div><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#FFCC55'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;S5696007-0004&quot;);'>Cementing&nbsp;Service&nbsp;Sup/Deep&nbs</a></div></td></tr></div><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#22AA55'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;S4082007-0012&quot;);'>Coil&nbsp;Tubing&nbsp;Operator/Equipment</a></div></td></tr></div><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#9999AA'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;L0008004-0157&quot;);'>Loads&nbsp;Analysis         </a></div></td></tr></div><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#EE9922'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;D6452009-0448&quot;);'>Document&nbsp;Layout&nbsp;Specialist&nbs</a></div></td></tr></div><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#CCCCCC'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;L0008004-0161&quot;);'>Technical&nbsp;Trainer&nbsp;</a></div></td></tr></div><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#00AAAA'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;A0029005-0025&quot;);'>Q.A.&nbsp;Engineer          </a></div></td></tr></div><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#888888'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;E0001008-0090&quot;);'>Clerk&nbsp;&nbsp;Secret&nbsp;Clearance</a></div></td></tr></div></table>
</body>
</html>

Answer 2

有时当你最终搞砸了混乱的代码时，你只需要努力并重新开始。

无序列表可以更好地为此工作，而不是单个列表。

ul.nav {list-style:none;padding:0;}
ul.nav li {width: 200px; height: 40px; line-height:40px; vertical-align:middle; text-align:center;}
ul.nav li a {color:#fff;text-decoration:none;}
.man {background-color:#ade;}
.tech {background-color:#fc5;}
.hr {background-color:#2a5;}

<ul class="nav">
    <li class="man"><a href="#">Man</a></li>
    <li class="tech"><a href="#">Tech</a></li>
    <li class="hr"><a href="#">HR</a></li>
</ul>

在IE 7 /条件CSS中居中文本

2 个答案: