[英]Rendering Issues in IE7
我一直在設計一個網站,並且我的某些頁面在瀏覽器(IE8)中的呈現方式與整個使用IE7的學校的呈現方式不同。 例如,我有一個新聞頁面,其中文本正確地縮進到圖像旁邊,這正是我想要發生的情況。 但是,在IE7中,所有文本均在圖像下方被擊倒,並使其看起來更加整潔。 以下是我用於整個網站的CSS。 任何幫助將非常感激。 該網站的位置是www.limavadygrammar.org.uk/test
身體{字體:100%Verdana,Arial,Helvetica,sans-serif; 邊距:0; / *最好將body元素的邊距和填充為零,以解決不同的瀏覽器默認設置/填充:0; 文本對齊:居中; /將容器放在IE 5 *瀏覽器中。 然后在#container選擇器中將文本設置為左對齊默認值* / color:#383F5C; 背景顏色:#383F5C; }
.style2 {font-size:12px} .style4 {color:#383F5C; font-size:14px;
}
.style5 {顏色:#0066FF; font-size:10px; }
/ 用於主容器的CSS /
.thrColAbs #container {位置:相對; / *添加位置:relative允許您相對於此容器放置兩個側邊欄/寬度:955px; /使用小於完整800px寬度的20px允許瀏覽器使用chrome並避免使用水平滾動條/背景:#FFF; 保證金:0自動; /自動邊距(與寬度一起)使頁面/邊框居中:1px實心#000000; 文字對齊:左; /覆蓋text-align:在body元素上的中心。 * / 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;
}
.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;
}
謝謝,馬克
有了這些東西,我通常的方法是這樣的:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.