Question

我的切换图像周围有一个边框，我无法弄清楚为什么会这样 - 这是基于http://net.tutsplus.com/tutorials/wordpress/how-to-create-a-better-wordpress-options-panel/的自定义选项面板

参见附图： enter image description here

在我的函数中，如何使用标记创建

<div class="rm_section">
<div class="rm_title">
<h3><img class="inactive" alt="">
<?php echo $value['name']; ?></h3><span class="submit"><input name="save<?php echo $i; ?>" type="submit" value="Save changes" />
</span><div class="clearfix"></div></div>
<div class="rm_options">

我的CSS

.rm_wrap{
    width:740px;
}

.rm_section{

}

.rm_opts label{
    font-size:12px;
    font-weight:700;
    width:200px;
    display:block;
    float:left; 
    color:#444
}
.rm_input {
    padding:30px 15px;
    border-bottom:1px solid #ddd;
    border-top:1px solid #fff;
    margin:8px 0 0;
    background:#f9f9f9;
    -webkit-box-shadow: inset 0px 0px 7px #DDD;
    -moz-box-shadow: inset 0px 0px 7px #DDD;
    box-shadow: inset 0px 0px 7px #DDD;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px
}
.rm_opts small{
    display:block;
    float:right;
    width:200px;
    color:#999
}
.rm_opts input[type="text"], .rm_opts select{
    width:280px;
    font-size:12px;
    padding:4px;
    color:#333;
    line-height:1em;
    background:#f3f3f3;
}
.rm_input input:focus, .rm_input textarea:focus{
        background:#fff;
}
.rm_input textarea{
    width:280px;
    height:175px;
    font-size:12px;
    padding:4px;
    color:#333;
    line-height:1.5em;
    background:#f3f3f3;
}
.rm_title h3 {
    cursor:pointer;
    font-size:1.2em;
    margin:17px 0 0;
    color:#333;
    float:left;
    width:80%;
    font-weight:normal;
    padding:0 4px;
}
.rm_title{
    cursor:pointer;
    border-bottom:1px solid #ddd;
    background:#eee;
    -webkit-box-shadow: inset 0px 0px 7px #DDD;
    -moz-box-shadow: inset 0px 0px 7px #DDD;
    box-shadow: inset 0px 0px 7px #DDD;
    padding:0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px
    }

.rm_title h3 img.inactive{
    margin:-7px 10px 0 5px;
    width:32px;
    height:32px;    
    background:url('images/pointer.png') no-repeat 0 0;
    float:left;
    border:none!important
}

.rm_title h3 img.active{
    margin:-7px 10px 0 5px;
    width:32px;
    height:32px;    
    background:url('images/pointer.png') no-repeat  0 -32px;
    float:left;
    border:none!important
}

.rm_title h3:hover img{
    border:none
}

.rm_title span.submit{
    display:block;
    float:right;
    margin:0;
    padding:0;
    width:15%;
    padding:14px 0;
}

.clearfix{
    clear:both;
}

.rm_table th, .rm_table td{
    border:1px solid #bbb;
    padding:10px;
    text-align:center;
}

.rm_table th, .rm_table td.feature{
    border-color:#888;
    }

的jQuery

jQuery(document).ready(function(){
        jQuery('.rm_options').slideUp();

        jQuery('.rm_section h3').click(function(){
            if(jQuery(this).parent().next('.rm_options').css('display')==='none')
                {   jQuery(this).removeClass('inactive').addClass('active').children('img').removeClass('inactive').addClass('active');

                }
            else
                {   jQuery(this).removeClass('active').addClass('inactive').children('img').removeClass('active').addClass('inactive');
                }

            jQuery(this).parent().next('.rm_options').slideToggle('slow');
        });
});

Answer 1

通常情况下，您不需要图像边框，因此请尝试明确设置图像的边框宽度：

img { border:0px; }

如果您确实需要图片周围的边框，请覆盖上面的内容。

修改

我看到你的样式表中已经指定了一些类的图像。不要将边框样式设置为none，而是尝试将边框宽度设置为0。我还要在使用!important
之前添加一个空格

无法找到什么创造这个边界，让我疯狂？

1 个答案: