每个浏览器都有奇怪的大小调整,除了IE浏览器
我一直在编写我的网站,它在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;
}
确保它不喜欢的东西,因为font-size:7.5px;
应该是非常小的你是放大在IE8。
是的,我放大了IE浏览器: - /。在所有3种浏览器中都具有相同的打印效果,因此我至少具有跨浏览器兼容性。以一定的比例增加一切,看看我是否能找到一个不会让我的用户失明的页面。 – Julian 2010-06-22 01:26:26
@Julian:不要忘记标记这是正确的答案。 – 2010-06-22 01:29:12
在IE7,Chrome,Safari,FF中看起来不错,除了透明的.png图片在IE6中不起作用。不错的工作!
我敢肯定,其他人会听到,但作为一个附注,不推荐使用'px'来设置字体大小。 – scunliffe 2010-06-22 01:15:16
你太担心了。您可以控制基本布局和样式,而不是确切的字体或大小。这就是说,我没有看到FF和IE的区别。 – 2010-06-22 01:17:41