在IE7中呈现问题

Question

我一直在设计一个网站，并且我的一些网页在我的浏览器（IE8）中呈现与使用IE7的整个学校不同的呈现。例如，我有一个新闻页面，其中的文本正好与图像一起缩进，这正是我想要发生的事情。然而，在IE7中，所有的文字都会在图像下方被击倒，并且看起来不那么细腻。下面是我用于整个网站的CSS。任何帮助将非常感激。该网站的位置是www.limavadygrammar.org.uk/test

body { font：100％Verdana，Arial，Helvetica，sans-serif; margin：0;/*最好将body元素的边距和填充值归零，以考虑不同的浏览器默认值/ padding：0; text-align：center;/这将容器置于IE 5 *浏览器中。然后将文本设置为#container选择器中的左对齐默认值*/ color：＃383F5C; background-color：＃383F5C; }

.style2 {font-size：12px} .style4 { color：＃383F5C; font-size：14px;

}

.style5 { 颜色：＃0066FF; font-size：10px; }

/CSS用于主容器/

.thrColAbs #container的{ 位置：相对;/*添加位置：相对允许您定位相对于此容器的两个侧边栏/ 宽度：955px;/使用20px，比整个800px宽度允许浏览器铬并避免水平滚动条/ background：#FFF; margin：0 auto;/自动页边距（与宽度一起）中心页面/ border：1px solid＃000000; text-align：left;/这将覆盖body元素上的text-align：center。 */ z-index：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; 
} 

。灰色庄重{

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，谷歌Chrome， Opera，Safari应该都可以用于这个目的）。
2. 测试上都充满黑客与“错”的东西，使人们在IE上工作，但可能会破坏它在别的
3. 使用条件注释包括在只有IE浏览器额外的样式表（有条件这些
4. 进行其他样式表评论是一个特定于IE的扩展，看起来像对其他浏览器的正常评论）