代码之家  ›  专栏  ›  技术社区  ›  Julian

除了IE,其他浏览器都有奇怪的大小调整

  •  2
  • Julian  · 技术社区  · 16 年前

    我一直在为我的网站编写代码,它在IE8中看起来很完美,但当我在Safafi、Chrome和Firefox中查看它时。一切都小得无法解释。 如何使网页看起来像在IE8浏览器中一样正常?

    http://www.jjosephs.byethost22.com/visibility/fixed/index_2.htm

    
    /* 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: Keithdonegan@gmail.com
    
          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;
    }
    
    2 回复  |  直到 16 年前
        1
  •  2
  •   Aaron Butacov    16 年前

    确保它不是像你放大了IE8的东西,因为 font-size:7.5px;

        2
  •  0
  •   JohnB    16 年前

    在IE7、Chrome、Safari、FF中看起来很棒,除了透明的.png图像在IE6中不起作用。干得好!