Firefox 4.0 CSS 变化？浮动问题？

【问题标题】：Firefox 4.0 CSS change? float issue?Firefox 4.0 CSS 变化？浮动问题？
【发布时间】：2011-08-04 08:56:00
【问题描述】：

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

无法解决这个问题！

提前感谢您的帮助！

【问题讨论】：

    标签： css firefox css-float firefox4


    【解决方案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;}
    猜你喜欢
    • 1970-01-01
    • 2017-04-08
    • 1970-01-01
    • 2011-06-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode