在IE8中在td之外进行文本渲染,但在所有其他浏览器中正确渲染

时间:2011-02-02 06:33:47

标签: html css xhtml

因此,在使用表格格式化的“简单”网站(XHTML和CSS)上工作时,我遇到了IE8中单元格外部文本渲染这个引人注目的小问题。它可以在所有其他测试的浏览器中以及兼容模式的IE8中正确呈现;我无法做出正面或反面。我已经将页面的精简版上传到http://olypen.com/yourface/f7u14/以显示我的意思。有问题的文字是主要数据框<td id="mainbody"&gt;,它会在框架上向右伸出。

任何建议都将不胜感激;这是开始的那些项目之一,“Hay,他知道如何编写网页;他将能够完全重新建立我们的网站。它有多难,我一直在Frontpage中自己做年份。”它刚从那里走下坡路。从我所看到的情况看起来好像一旦我弄明白我将完成它(现在,插入戏剧性的音乐: dun dun dun )。

谢谢,

理查德

这是我的代码,如果有人想要通过它来破解:

网页:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="css/default.css" type="text/css" title="default" />
<title>Y U NO WORK IN IE8?</title>
</head>
<body>
<table border="0" id="formatting">
<tr>
<td colspan="2" id="header">
<!--headerstuff-->
<h1><img src="images/y-u-no.jpg" height="100px" alt="Y U NO" />Y U NO WORK?</h1><br />
</td>
</tr>
<tr>
<td rowspan="2" id="leftbar">
<!--left navbar-->
<div align="center">
<table id="leftlinks"><tbody>
<tr>
    <td><a href="index.html"><span style="font-variant: small-caps; font-size:16px;">H</span>ome</a></td>
</tr>
<tr>
    <td><a href="index.html"><span style="font-variant: small-caps; font-size:16px;">O</span>ur&nbsp;<span style="font-variant: small-caps; font-size:16px;">S</span>ervices</a></td>
</tr>
<tr>
    <td><a href="index.html"><span style="font-variant: small-caps; font-size:16px;">T</span>echnical&nbsp;<span style="font-variant: small-caps; font-size:16px;">S</span>upport</a></td>
</tr>
<tr>
    <td><a href="index.html"><span style="font-variant: small-caps; font-size:16px;">A</span>bout&nbsp;<span style="font-variant: small-caps; font-size:16px;">U</span>s</a></td>
</tr>
</tbody></table>
</div>
<!--end of left navbar-->
</td>

<td id="bgformattingwide">
<div align="center">
<!--Top Navlinks-->
<table id="navlinks-table"><tbody>
<tr>
    <td id="navlinks"><a href="index.thml"><span style="font-variant: small-caps; font-size:16px;">H</span>ome</a></td>
    <td id="navlinks"><a href="index.html"><span style="font-variant: small-caps; font-size:16px;">O</span>ur&nbsp;<span style="font-variant: small-caps; font-size:16px;">S</span>ervices</a></td>
    <td id="navlinks"><a href="index.html"><span style="font-variant: small-caps; font-size:16px;">T</span>echnical&nbsp;<span style="font-variant: small-caps; font-size:16px;">S</span>upport</a></td>
    <td id="navlinks"><a href="index.html"><span style="font-variant: small-caps; font-size:16px;">A</span>bout&nbsp;<span style="font-variant: small-caps; font-size:16px;">U</span>s</a></td>
</tr>
</tbody></table>
</div>
</td>
</tr>
<tr>
<td id="mainbody">
<!-- main data frame -->
<br />
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit eros    
at risus varius a lacinia risus porttitor. Pellentesque quis tristique elit. Sed 
hendrerit nulla ac mi aliquet porta. Suspendisse non leo lectus. Fusce tristique     
laoreet magna in porttitor. Morbi nunc mi, bibendum nec faucibus nec, aliquet eget
 ante. Quisque placerat ipsum sit amet nulla porttitor quis accumsan nisl mollis. 
Proin elit leo, adipiscing nec congue id, suscipit ut risus. Nunc vitae odio nisl. 
Curabitur varius dictum eros placerat porta. Donec vestibulum urna sed sem facilisis 
varius. Donec id ante justo. Mauris condimentum tristique justo vitae dapibus. Donec 
mattis tristique accumsan. Suspendisse condimentum lacinia lobortis. In hac habitasse 
platea dictumst. Sed id tortor eu purus rutrum adipiscing.
</p>
<!--end of main data frame -->
</td>
</tr>
<tr>
<td colspan="2" id="footer-frame">
<!--Copyright Notice-->
Content Copyright &#0169; 2011, <a href="http://deafmutetech.com/">Deaf-Mute 
Technologies</a>. All Rights Reserved.
</td>
</tr>
</table>
</body>
</html>

这是我的CSS:

body{font-family: Arial;font-size: 12px;cursor: default;color: #000;background-color:#FFFFFF;}
img{border: 0px;}
#formatting {border-spacing: 15px 15px;width: 100%;height: 100%;}
#header {text-align: center;    height: 170px;padding-top: 15px;background: 
#CCCCCC; border: 5px solid #000000;}
#navlinks-table {border-spacing: 5px 0px;}
#navlinks {text-align: center;width: 200px;padding-left: 0px;padding-right: 0px;    background : #FFFFFF;border: 2px solid #000000;}
#navlinks a{font-family: Arial;font-size: 18px;color: #000000;}
#mainbody {text-align:center;vertical-align:top;padding-left:5%;padding-right:5%;width: 82%;background: #CCCCCC;border: 5px solid #000000;min-width: 840px;}
#footer-frame{padding-top: 10px;text-align: center;height: 2%;background: #CCCCCC;border: 3px solid #000000;}
h3{font-family: Arial;font-size: 18px;color: #000000;font-weight: bold;}
a{font-family: Arial;font-size: 16px;color: #000000;text-decoration: none;}
a:link{font-family: Arial;font-size: 16px;font-weight: bold;color: #000000;}
a:visited{font-family: Arial;font-size: 16px;font-weight: bold;color: #000000;}
a:hover{font-family: Arial;font-size: 16px;font-weight: bold;color: #000000;text-decoration: underline;}
#bgformattingwide {text-align: center;height:1%;min-width: 840px;padding-top:5px;padding-bottom: 5px;}
#bgformattingtall {width: 1%;}
#leftbar {border: 5px solid #000000; background: #cccccc;width: 17%;min-width: 210px;vertical-align: top;}
#leftlinks td {text-align: center;width: 200px;padding-left: 5px;padding-right: 5px;background : #FFFFFF;border: 2px solid #000000;}
#leftlinks {border-spacing: 5px 15px;}
#leftlinks a{font-family: Arial;    font-size: 18px;color: #000000;}

1 个答案:

答案 0 :(得分:3)

我将主体的填充从百分比更改为像素,这似乎在IE8中正确呈现 似乎表格单元格中计算填充的问题是IE8中的已知错误,请参见此处:http://jhop.me/ie8-bugs:“填充时不会重新计算表格单元格的内容区域的计算宽度(百分比)值应用“,此处带有示例:http://jhop.me/tests/bugs/ie8/tablecell-computedwidthpadding.html