我在使用较低版本的 IE 设计网页时遇到了问题。 我想显示此输出，但它不适用于 IE7 及以下版本。 这是链接:http://jsfiddle.net/he6ra/
我尝试添加 * 但它没有帮助。
我正在使用IE11的开发者工具在低版本中预览/显示它。
这是我所做的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type='text/css'>
*, body, table, tr, td, div, a, span{
font-family: Tahoma;
color: inherit;
font-size: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 15px;
cursor: default;
}
body {
background-color: #f1f1f1;
color: #000000;
min-width: 960px;
max-height: 100%;
font-size: 14px;
background: url() repeat scroll;
}
a, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
cursor: pointer;
}
#banner {
display: block;
position: relative;
width: 100%;
top: 0px;
left: 0px;
z-index: 1;
}
#banner .sub {
width: 960px;
margin-left: auto;
margin-right: auto;
height: 120px;
/* IE */
background-color:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99010101,endColorstr=#99010101);
zoom: 1;
/* DEFAULT */
background-color: rgba(1,1,1,.6);
border-bottom: 2px solid #b30;
color: #f0f0f4;
}
#banner .sub table {
height: 100%;
}
#banner .sub table tr td p {
font-size: 17px;
line-height: 20px;
}
#mainNav {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
width: 960px;
/* IE */
background-color: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000,endColorstr=#cc000000);
zoom: 1;
/* DEFAULT */
background-color: rgba(0,0,0, .8);
overflow: hidden;
}
#mainNav * {
background-color: transparent;
}
#mainNav ul {
list-style: none;
}
#mainNav ul li {
display: inline;
zoom: 1;
text-align: center;
}
#mainNav ul li.active a {
color: #F04100;
border-bottom: solid 2px #e9a1f0 /* #992900; */
}
#mainNav ul li a {
display: inline-block;
padding: 20px;
color: #FFA77C /* #CADEF1 */;
font-size: 15px;
}
#mainNav ul li a:hover {
text-decoration: none;
/* background-color: rgba(216,100,34,.05); */
/* color: #F04100 #F1DECA; */
}
#content {
width: 960px;
margin-left: auto;
margin-right: auto;
display: block;
padding-bottom: 18px;
z-index: 1;
}
#content .sub {
/* background: rgba(34, 08, 19, .8) url();*/
background: url(iconbg_2.png);
border-bottom: 2px solid #d75100;
padding: 10px;
/* background-color: rgba(34, 08, 19, .2); */
/*
z-index: 1;
border-left: 2px solid black;
border-right: 2px solid black;
background-color: #220813;
color: #f0f3c0;
background: url() repeat scroll;
*/
}
#footer {
position: fixed;
width: 100%;
bottom: 0px;
z-index: 1;
}
#footer .sub {
width: 960px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
border-top: 2px solid #d75100;
background-color: #000;
color: #444;
}
#footer div .shortLinks {
float: right;
padding: 1px;
}
#footer div .shortLinks a {
font-family: Trebuchet MS;
font-size: 11px;
color: #fcfefd;
}
#footer div .userButtons {
float: left;
}
.b {
font-weight: bold;
}
.fr {
float: right;
}
</style>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>
</head>
<body>
<div id="banner">
<div class="sub">
<table cellpadding="1" cellspacing="1" border="0">
<tr>
<td> </td>
<td valign="middle">
<img alt="" src="" />
</td>
<td> </td>
<td>
<p class="b">Contoso</p>
<p>Online Leave</p>
</td>
</tr>
</table>
</div>
</div>
<div id="mainNav">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Leave Application</a></li>
<li><a href="#">Leave Status</a></li>
<li class="fr"><a href="#">Logout</a></li>
<li class="fr"><a href="#">Update</a></li>
</ul>
</div>
<div id="contentFrame"></div>
<div id="content">
<div class="sub">
<p>Start</p>
<script>
for(var a = 0; a<10; a++){
document.write("<p>" + a + " the quick brown fox jumps over the lazy dog</p>");
}
</script>
<p>End</p>
</div>
</div>
<div id="footer">
<div class="sub">
<div class="userButtons">
<table cellpadding="1" cellspacing="1" border="0">
<tr><td><span class="ui-icon"></span></td></tr>
</table>
</div>
<div class="shortLinks">
<table cellpadding="1" cellspacing="1" border="0"><tr>
<td><a href="#">Some Links</a></td>
<td>|</td>
<td><a href="#">Online Leave</a></td>
<td>|</td>
<td><a href="#">Report</a></td>
<td> </td>
</tr></table>
</div>
</div>
</div>
</body>
</html>
这是它在 IE7 上的样子
我希望它看起来像什么
最佳答案
这是一个更新的 JSFiddle: http://jsfiddle.net/he6ra/2/
你在 float 你的
我也做了所有链接:
#mainNav ul li a {
display: block;
}
我还使您的 .fr 类更加具体:
#mainNav ul li.fr {
float: right;
}
关于html - 如何申请 float : left and display: inline on lower versions of IE?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24731873/