Question

我做了一个下拉菜单。但在mozilla firefox中工作方式不同。如果您访问演示页面，您可以了解我的问题。当我点击菜单时工作方式不同。但在其他浏览器中正常工作。这是JSFiddle中的演示 菜单的CSS：

a.change_photo_link{
    position:absolute;
    line-height:25px;
    width:20px;
    height:20px;
    cursor:pointer; 
    display:block;
    border: 1px solid rgba(128,128,128,1);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-image: rgba(235,235,235,1);
    background-image: -webkit-linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
    background-image: -moz-linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
    background-image: -o-linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
    background-image: -ms-linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
    background-image: linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9 100%);
    -webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    -moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}
.bubmenu{
   float:left;
    position:relative;
    width:150px;
    height:auto;
    padding:0px;
    border:1px solid #d8dbdf;
    background-color:#f4f4f4;
    margin-top:0px;
    display:none;
    margin-left:-131px;
    margin-top:20px;

}
.change_photo ul {
   margin:0px;
    padding:0px;
    display:block;
    list-style:none;
}
.change_photo ul li a {
    width:150px;
    height:20px;
    line-height:20px;
    display:block;
    font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
    font-size:11px;
    color:#3b5997;
    padding:3px 0px;
    cursor:pointer;
    text-decoration:none;
    text-indent:15px;
}
.change_photo ul li a:hover {
    background-color:#25476c;
    color:#fff;
    text-decoration:none;
}
.change_photo.open .change_photo_link { 
                cursor: pointer;
                width: 20px;
                height:20px;
                display: inline-block;  
                line-height: 16px;
                border-radius:0px;
                -webkit-border-radius:0px;
                -moz-border-radius:0px;
                -o-border-radius:0px;
                text-decoration: none !important;
                background: #d8dbdf url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
            }
            .u_p_a.open .change_photo_link {
                -webkit-border-radius:0px;
                -moz-border-radius:0px;
                -o-border-radius:0px;
                 background: #d8dbdf url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
    border-radius:0px;
            }

还有HTML代码：

<a class="change_photo_link"></a>
              <div class="bubmenu">
                 <ul class="root">
                   <li><a href="#">Fotoğrafı değiştir</a></li>
                   <li><a href="#">Fotoğrafı kaldır</a></li>
                 </ul>
              </div>

Answer 1

这是因为下面的css块。对块进行注释并测试一次。

    .change_photo.open .change_photo_link {
        background: url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat scroll 100% 0 #D8DBDF;
        border-radius: 0;
        cursor: pointer;
        display: inline-block;
        height: 20px;
        line-height: 16px;
        text-decoration: none !important;
        width: 20px;
    }

下载菜单工作不同在mozilla firefox

1 个答案: