Firefox 4.0 CSS 变化？浮动问题？

Posted 2023-05-07

【中文标题】Firefox 4.0 CSS 变化？浮动问题？

【英文标题】：Firefox 4.0 CSS change? float issue?

【发布时间】：2011-08-04 08:56:00

【问题描述】：

站点“allendesigners.com”在 Firefox 3.6 中看起来不错，但现在出现了一些奇怪的浮动问题。请注意，浮动时类别居中：左；在“sidebar-a”上。

无法解决这个问题！

提前感谢您的帮助！

【参考方案1】：

这行得通！我改变了浮动：对；定位：绝对；在#sidebar-a 中，添加位置：相对；到#content 并添加#new float:right!important 并删除顶部#container 规则。

body 
    background-color: #FFFFFF;
    background-image: none;
    font-family: Arial;
    font-size: 120%;

* 
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;

#printcart 
    display: none;

.clearfix:after 
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;

div#fixedBox 
    position: fixed;
    z-index: 300;

body 
    background-attachment: fixed;
    background-color: #6499BD;
    background-image: url("images/bg.jpg");
    background-repeat: repeat-x;
    font-family: Arial;
    font-size: 120%;

#container 
    background-color: #DEDEDE;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    width: 750px;

#new 
    float: right!important;

#content 
    property: relative;

#storetypes 
    font-size: 55%;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;

#sidebar-a 
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #DEDEDE;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 7px;
    position: absolute;
    width: 224px;

.mainnavlnk 
    background-image: url("images/sidebar-ah2-off.jpg");
    color: #444444;
    display: block;
    font-size: 65%;
    height: 22px;
    line-height: 22px;
    padding-left: 9px;
    text-decoration: none;

.mainnavlnk:hover 
    background-image: url("images/sidebar-ah2-on.jpg");

.subnavlnk 
    text-decoration: none;

.onnav 
    background-image: url("images/sidebar-ah2-on.jpg");

#footer 
    clear: both;
    margin-top: 7px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;

h1 
    background-image: url("images/header.jpg");
    background-repeat: repeat-x;
    display: block;
    height: 57px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    text-indent: -9999px;
    width: 750px;

#sidebar-a h2 
    background-image: url("images/h2-bg.jpg");
    background-repeat: repeat-x;
    color: #444444;
    font-size: 80%;
    height: 30px;
    line-height: 30px;
    padding-left: 7px;
    width: 217px;

#nav 
    background-image: url("images/navh2-bg.jpg");
    background-repeat: repeat-x;
    float: right;
    font-size: 70%;
    height: 30px;
    line-height: 30px;
    margin-top: 7px;
    padding-left: 5px;
    width: 518px;

#searchbox 
    float: right;
    font-size: 70%;
    height: 30px;
    line-height: 30px;
    text-align: right;
    width: 518px;

#adpanel 
    background-color: #FFFFFF;
    display: block;
    float: right;
    height: 70px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
    width: 745px;

.adaddress 
    display: block;
    float: left;
    font-size: 65%;
    margin-left: 4px;
    padding-bottom: 5px;
    padding-left: 7px;
    padding-right: 5px;
    padding-top: 5px;
    width: 250px;

.cartblock 
    float: right;
    font-size: 80%;
    padding-right: 15px;
    text-align: right;

h3 
    padding-top: 15px;

.imgs 
    float: right;
    margin-top: 3px;

.subnav 
    color: #666666;
    font-size: 70%;
    margin-left: 20px;

.subnav ul li 
    line-height: 15px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;

.subnav ul 
    list-style-type: square;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-top: 3px;

#spinner 
    background-color: #FFFFFF;
    float: right;
    margin-top: 3px;
    text-align: center;
    width: 523px;

#text0 
    background-color: #FFFFFF;
    float: right;
    font-size: 80%;
    margin-top: 3px;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    width: 503px;

#text1 
    background-color: #FFFFFF;
    float: right;
    font-size: 80%;
    margin-top: 3px;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-top: 10px;
    width: 513px;

#imagebar1 
    float: right;

#text2 
    background-color: #FFFFFF;
    float: right;
    font-size: 80%;
    padding-bottom: 25px;
    padding-left: 10px;
    padding-top: 10px;
    width: 513px;

#text3 
    background-color: #FFFFFF;
    float: right;
    font-size: 70%;
    margin-top: 3px;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-top: 10px;
    width: 513px;

#text3 td 
    text-align: left;

#text3 p 
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px;

#footer 
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/footer.jpg");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    font-size: 60%;
    height: 42px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 15px;
    text-align: center;
    width: 750px;

#cardship 
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/cardship.jpg");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    height: 142px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 210px;

#thawte 
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/thawte.gif");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    height: 148px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 148px;

#cartbox 
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #EEEEEE;
    border-bottom-color: #CCCCCC;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #CCCCCC;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #CCCCCC;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #CCCCCC;
    border-top-style: solid;
    border-top-width: 1px;
    float: right;
    margin-top: 10px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    text-align: left;
    width: 250px;

#info 
    font-weight: bold;
    text-align: left;
    width: 145px;

#status 
    color: #00CC00;
    font-size: 70%;
    font-weight: bold;
    height: 10px;
    text-align: center;

#checkout 
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #CCCCCC;
    border-bottom-color: #AAAAAA;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #AAAAAA;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #AAAAAA;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #AAAAAA;
    border-top-style: solid;
    border-top-width: 1px;
    color: #555555;
    display: block;
    font-size: 70%;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    width: 100px;

#checkout:hover 
    background-color: #DD7777;
    color: #000000;

#cart 
    float: left;
    margin-right: 5px;

#prod 
    background-color: #FFFFFF;
    padding-bottom: 15px;

#categorybox 
    border-bottom-color: #EEEEEE;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    float: left;
    font-size: 70%;
    height: 230px;
    margin-bottom: 30px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 0;
    padding-bottom: 30px;
    width: 47%;

#categoryicon 
    text-align: center;

#catalog td 
    border-bottom-color: #CCCCCC;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;

address, #catalog_request 
    border-top-color: #555555;
    border-top-style: solid;
    border-top-width: 1px;
    font-size: 11px;
    font-style: normal;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;

address p, #catalog_request p 
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;

#featured 
    border-bottom-color: #CCCCCC;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin-bottom: 15px;
    width: 490px;

.leightbox 
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: white;
    border-bottom-color: #B8B8B8;
    border-bottom-style: solid;
    border-bottom-width: 10px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #B8B8B8;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 10px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #B8B8B8;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 10px;
    border-top-color: #B8B8B8;
    border-top-style: solid;
    border-top-width: 10px;
    color: #333333;
    display: none;
    left: 32%;
    overflow-x: auto;
    overflow-y: auto;
    position: absolute;
    text-align: left;
    top: 25%;
    width: 500px;
    z-index: 1001;

#overlay 
    background-color: #333333;
    display: none;
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;

.randomproducts 
    display: none;

object 
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;

embed 
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;


.lightbox[id] 
    position: fixed;

#overlay[id] 
    position: fixed;

萤火虫很甜。

安迪

【讨论】：

底部也应该在右边。不确定绝对位置是我想要做的。我不明白发生了什么变化。想知道我是否应该切换到严格的文档类型

添加了#new float:right!important 和#content position:relative; 并删除了第一个#container display:none;