javascript - IE7 中的渲染问题

Question

我一直在设计一个网站，我的一些页面在我的浏览器 (IE8) 中呈现的效果与整个学校使用 IE7 的呈现方式不同。例如，我有一个新闻页面，其中文本与图像一起正确缩进，这是我想要发生的。然而，在 IE7 中，所有的文本都被移到图像下方，使它看起来更凌乱。以下是我为整个网站使用的 CSS。任何帮助将非常感激。网站的位置是www.limavadygrammar.org.uk/test

正文{ 字体:100% Verdana、Arial、Helvetica、sans-serif； margin :0；/* 将 body 元素的边距和填充归零以适应不同的浏览器默认值是一种很好的做法 / 填充:0； 文本对齐:居中；/ 这会在 IE 5* 浏览器中将容器居中。然后在#container 选择器中将文本设置为左对齐默认值 */ 颜色:#383F5C； 背景色:#383F5C；

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

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

/主容器的 CSS/

.thrColAbs #容器{ position:relative；/* 添加 position: relative 允许您相对于此容器定位两个侧边栏 / 宽度:955px；/ 使用比完整的 800px 宽度小 20px 允许浏览器 chrome 并避免水平滚动条 / 背景:#FFF； margin : 0 auto ；/ 自动边距(连同宽度)使页面居中 / 边框:1px 实心#000000； 文本对齐:左；/ 这会覆盖 body 元素上的 text-align: center。 */ z-索引:0； }

/主要内容区域的 CSS/

.thrColAbs #mainContent {

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/

.thrColAbs #login { 
float:right;
clear:both;
height:auto;
width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #FFF; /* the background color will be displayed for the length of the content in the column, but no further */
padding:0px 0px;
padding-top:0px;
padding-bottom:25px;
z-index:1;
}

/*CSS for News Feed*/

.thrColAbs #news {  
float:right;
clear:both;
height:400px;
width: 240px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #FFF; /* the background color will be displayed for the length of the content in the column, but no further */
padding:10px 15px;
} 

/*CSS for News Heading*/

#latestnews{}

/*CSS for div for the news and sub menus on other pages*/

#archive{
height:auto;
width: 65%; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #FFF; /* the background color will be displayed for the length of the content in the column, but no further */
margin: auto;
padding: 10px 20px;
}   

/*CSS for Javascript Slideshow*/

#PhotosBackground {

position:relative;
overflow:hidden;
float: left;
z-index:0;
padding-bottom: 20px;

/*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;
}

.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;
}

谢谢， 马克

Answer 1

对于这些东西，我通常的做法是这样的:

1. 针对相当符合标准的浏览器编写 HTML 和 CSS(Firefox、Google Chrome、Opera、Safari 都可以用于此目的)。
2. 测试所有这些
3. 制作额外的样式表，使其充满 hack 和“错误”的东西，使其在 IE 上运行但可能会在其他任何东西上崩溃
4. 使用条件注释仅在 IE 中包含额外的样式表(条件注释是 IE 特定的扩展，看起来像其他浏览器的常规注释)