2010-06-22 59 views
2

我一直在编写我的网站,它在IE 8中看起来很完美,但是当我在Safafi,Chrome和Firefox中查看它时。一切都无法小觑。 如何使网页看起来像在IE 8浏览器中一样正常?每个浏览器都有奇怪的大小调整,除了IE浏览器

我的网站是:http://www.jjosephs.byethost22.com/visibility/fixed/index_2.htm

我一直在用他的代码搞乱了好几天,现在试图让它在所有4个浏览器。我粘贴了下面的CSS代码,也许有些东西会跳出你的CSS大师。


/* Eric Myers - CSS Reset v1.0 | 20080212 */ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    vertical-align: baseline; 
    background: transparent; 
} 
body { 

    background-color: rgb(85,105,94); 
    font-family:"Gill Sans MT", "Gill Sans", sans-serif; 
    color:white; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 

/* remember to define focus styles! */ 
:focus { 
    outline: 0; 
} 

/* remember to highlight inserts somehow! */ 
ins { 
    text-decoration: none; 
} 
del { 
    text-decoration: line-through; 
} 

/* tables still need 'cellspacing="0"' in the markup */ 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

/* 
     Created by Keith Donegan of Code-Sucks.com 

     E-Mail: [email protected] 

     You can do whatever you want with these layouts, 
     but it would be greatly appreciated if you gave a link 
     back to http://www.code-sucks.com 

*/ 

* { padding: 0; margin: 0; } 

#wrapper { 
margin: 0 auto; 
width: 922px; 
} 

#leftcolumn { 
margin: 10px 0px 0px 0px; 
padding: 10px; 
height: 500px; 
width: 155px; 
float: left; 
} 
#content { 
float: left; 
margin: 10px 0px 0px 0px; 
padding: 10px; 
height: 500px; 
width: 490px; 
display: inline; 
line-height:110%; 
font-family:"Gill Sans MT", "Gill Sans", sans-serif; 
} 
#rightcolumn { 
margin: 10px 0px 0px 0px; 
padding: 10px; 
height: 500px; 
width: 155px; 
float: left; 
position: relative; 
} 


#background_gradient img{ 
    position:absolute; 
    width:100%; 
    left:0px; 
    top:0px; 
} 

#background_logo img{ 
    position:absolute; 
    left:-271px; 
    top:-134px; 
    z-index:-1; 
    display:inline; 
} 

#coming_soon_img{ 
    position:absolute; 
    top:0px; 
    left:0px; 
} 

#logo_large{ 
    float:right; 
} 

#landing_text{ 
    clear:both; 
} 

#first_paragraph, #company_name, #street_address, .contact_short, #copyright{ 
    color:#ffffff; 
} 

#landing_text{ 
    font-size:15px; 
    line-height:20px; 
} 

.colored_text{ 
    color:#bd9e00; 
} 

#first_paragraph{ 
    font-size:20.5px; 
    font-weight:bold; 
} 

#first_paragraph span{ 
    font-weight:normal; 
    font-style:italic; 
} 

#lower_half{ 
    margin-top:26px; 
} 

#tag_line{ 
    font-size:17px; 
    float:left; 
} 


#call_to_action_button{ 
    float:right; 
} 

#company_name{ 
    font-size:13.5px; 
} 

#horizontal_line{ 
    margin-top:15px; 
} 

#footer_text{ 
    font-size:7.5px; 
    font-family:arial, "Gill Sans MT", sans-serif; 
    font-weight:bold; 
} 

#logo_micro, #address_details{ 
    float:left; 
} 

#address_details{ 
    margin-left:12.5px; 
} 

#contact_details{ 
    display:block; 
    line-height:80%; 
} 

.specific_contact_details, .specific_contact_details a{ 
    color:#bd9e00; 
} 

#copyright{ 
    float:right; 
    font-size:6.5px; 
} 
.other_landing_text{ 
    line-height:121.5%; 
    color:#313031; 
} 
+1

我敢肯定,其他人会听到,但作为一个附注,不推荐使用'px'来设置字体大小。 – scunliffe 2010-06-22 01:15:16

+0

你太担心了。您可以控制基本布局和样式,而不是确切的字体或大小。这就是说,我没有看到FF和IE的区别。 – 2010-06-22 01:17:41

回答

2

确保它不喜欢的东西,因为font-size:7.5px;应该是非常小的你是放大在IE8。

+0

是的,我放大了IE浏览器: - /。在所有3种浏览器中都具有相同的打印效果,因此我至少具有跨浏览器兼容性。以一定的比例增加一切,看看我是否能找到一个不会让我的用户失明的页面。 – Julian 2010-06-22 01:26:26

+2

@Julian:不要忘记标记这是正确的答案。 – 2010-06-22 01:29:12

0

在IE7,Chrome,Safari,FF中看起来不错,除了透明的.png图片在IE6中不起作用。不错的工作!