Javascript IE7中的渲染问题

我一直在设计一个网站，我的一些页面在我的浏览器（IE8）中的呈现方式与使用IE7的整个学校的呈现方式不同。例如，我有一个新闻页面，其中文本在图像旁边正确缩进，这就是我想要发生的事情。然而，在IE7中，所有的文本都被删除在图像下面，只是让它看起来更不整洁。下面是我在整个网站上使用的CSS。任何帮助都将不胜感激。该网站位于www.limavadygrammar.org.uk/test

身体{ 字体：100%Verdana，Arial，Helvetica，无衬线； margin:0；/*最好将body元素的边距和填充置零，以说明不同的浏览器默认值/ 填充：0； 文本对齐：居中；/IE 5*浏览器中将容器居中。然后在#容器选择器中将文本设置为左对齐默认值*/ 颜色：#383F5C； 背景色：#383F5C； }

.style2{字体大小：12px} .style4{ 颜色：#383F5C； 字体大小：14px

}

.style5{ 颜色：#0066FF； 字体大小：10px； }

/主容器的CSS/

.thrColAbs#容器{ position:relative；/*添加position:relative允许您相对于此容器定位两个侧栏/ 宽度：955px；/20px小于800px的全宽可用于浏览器浏览器浏览器，并避免水平滚动条/ 背景：#FFF； 页边距：0 auto；/auto页边距（与宽度一起）使页面居中/ 边框：1px实心#000000； text align:left；/n这将替代body元素上的text align:center*/ z指数：0； }

/主要内容区域的CSS/

.thrColAbs#主要内容{

margin-left:10px;
padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background-color:#FFF;}

/按钮所在区域的CSS/

}

.style6{

color: #383F5C;
font-weight: bold;
font-size: 12px;

}


/*CSS for indentation of images*/

#inpage-image { 
float:left; 
margin:5px; 
} 

/*CSS For Header*/

#header {height:182px;}


/*CSS for Main Drop Down Navigation Menu*/

#myjquerymenu {
height:auto;
position:absolute;
width: 100%;
clear:both;
z-index:1;
padding-bottom:0px;
left: 0px;
top: 185px;

}

/*CSS for text indentation on pages*/

#text-indent { 
margin: 0 200px 0 50px;
}

#text-indent p{
width:550px;
}

/*CSS for Fancy box*/

.gallery_image {

border: 1px solid #BBB;
padding: 2px;   

}

/*CSS for Collapsible Menu in Sidebar*/

.example_menu {
    font-size: 10px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: 160px;
}
.example_menu ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
.example_menu li {
    background-image: none;
    margin: 0;
    padding: 0;
}
.example_menu ul ul {
    display: inline;
}
.example_menu ul ul li a {
    padding-left: 20px;
    width: 118px;
}
.example_menu a {
    color: #fff;
    cursor: pointer;
    display: block;
    font-weight: bold;
    margin-left: 0;
    padding: 2px 2px 2px 17px;
    width: 121px;
}
.example_menu a.expanded {
    background: #012D58 url(collapse.gif) no-repeat 3px 50%;
}
.example_menu a.collapsed {
    background: #012D58 url(expand.gif) no-repeat 3px 50%;
}

.example_menu a:hover {
text-decoration:none;       
}

.example_menu ul a {
    background: #fff;
    border-top: 2px solid #fff;
    color: #0066FF;
    text-decoration:none;
    display: block;
    font-weight: normal;
    padding: 2px 2px 2px 10px;
    width: 128px;
}
.example_menu ul a:hover {
    background : #f5f5f5;
    text-decoration: none;
}
.example_menu li.active a {
    background: #fff;
}
.example_menu li.active li a {
    background: #e8e8e8;
}
.example_menu .footer {
    background: transparent url(footer.jpg) no-repeat 0 0;
    border-top: 2px solid #fff;
    height: 9px;
    margin: 0 0 10px 0;
    width: 142px;
}
.example_menu .footer span {
    display: none;
}

谢谢，

---

Marc

有了这些东西，我通常的做法是：

在符合标准的浏览器上编写HTML和CSS（Firefox、Google Chrome、Opera、Safari都可以）

对所有这些进行测试

制作额外的样式表，其中充满了黑客和“错误”的东西，使其在IE上工作，但可能在其他任何方面破坏它

使用条件注释仅在IE中包含额外的样式表（条件注释是IE特有的扩展，对于其他浏览器来说，它看起来像常规注释）

---

在当前状态下，没有人会回答这个问题。将实际问题简化为一个简单的示例，修复格式，并包含html。同时，我建议您尝试使用像IETester这样的工具来修复它，它可以让您同时运行不同的IE浏览器版本。是的，它在其他浏览器中非常有效您列出的rs。我会试试看我的进展如何，这似乎有点奇怪，一些微不足道的东西可以带来所有的不同。这可能是支持IE6和之前版本的一个合理方法，但imho IE7通常没有那么糟糕，使用符合标准的有效css无法解决问题。我总是发现大多数问题都是可以解决的通过一些小的调整就解决了。你可能希望，但字段集是IE7中工作不好的一个臭名昭著的例子。显示：内联块是另一个例子。MS改进了IE很多，但仍然存在渲染错误，即使在IE8中也是如此。感谢大家的回复，我对网页设计还很陌生，所以我也会学习这些小技巧和技巧当我遇到他们时，我会随大流，这只是一些小问题，正如我所说的，应该能够得到解决。

/*CSS for footer*/

#footer {

clear: both;
height: auto;
padding: 15px;
font-size: 10px;
border-top: 1px solid #efefef;
line-height: 18px;

}

#links {

clear: both;
height: auto;
padding: 15px;
font-size: 10px;
border-top: 1px solid #efefef;
line-height: 18px;
}

color: #383F5C;
font-weight: bold;
font-size: 12px;

}


/*CSS for indentation of images*/

#inpage-image { 
float:left; 
margin:5px; 
} 

/*CSS For Header*/

#header {height:182px;}


/*CSS for Main Drop Down Navigation Menu*/

#myjquerymenu {
height:auto;
position:absolute;
width: 100%;
clear:both;
z-index:1;
padding-bottom:0px;
left: 0px;
top: 185px;

}

/*CSS for text indentation on pages*/

#text-indent { 
margin: 0 200px 0 50px;
}

#text-indent p{
width:550px;
}

/*CSS for Fancy box*/

.gallery_image {

border: 1px solid #BBB;
padding: 2px;   

}

/*CSS for Collapsible Menu in Sidebar*/

.example_menu {
    font-size: 10px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: 160px;
}
.example_menu ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
.example_menu li {
    background-image: none;
    margin: 0;
    padding: 0;
}
.example_menu ul ul {
    display: inline;
}
.example_menu ul ul li a {
    padding-left: 20px;
    width: 118px;
}
.example_menu a {
    color: #fff;
    cursor: pointer;
    display: block;
    font-weight: bold;
    margin-left: 0;
    padding: 2px 2px 2px 17px;
    width: 121px;
}
.example_menu a.expanded {
    background: #012D58 url(collapse.gif) no-repeat 3px 50%;
}
.example_menu a.collapsed {
    background: #012D58 url(expand.gif) no-repeat 3px 50%;
}

.example_menu a:hover {
text-decoration:none;       
}

.example_menu ul a {
    background: #fff;
    border-top: 2px solid #fff;
    color: #0066FF;
    text-decoration:none;
    display: block;
    font-weight: normal;
    padding: 2px 2px 2px 10px;
    width: 128px;
}
.example_menu ul a:hover {
    background : #f5f5f5;
    text-decoration: none;
}
.example_menu li.active a {
    background: #fff;
}
.example_menu li.active li a {
    background: #e8e8e8;
}
.example_menu .footer {
    background: transparent url(footer.jpg) no-repeat 0 0;
    border-top: 2px solid #fff;
    height: 9px;
    margin: 0 0 10px 0;
    width: 142px;
}
.example_menu .footer span {
    display: none;
}