在IE中删除按钮的列表(不是LI元素)样式

时间:2013-02-15 00:42:06

标签: javascript jquery html css styles

我有一种我喜欢的风格,像往常一样,它在Firefox 18中看起来不错,但在IE 9的版本上(我知道它不完全是最新版本)它看起来很糟糕(并且已经坏了)。

所以我决定放弃这种风格,试着找一个在线工作的例子。但是我发现找不到类似的东西是不可能的,更不用说与IE兼容了!

这里有没有人知道如何修复我的例子,也许让它更向后兼容或者有没有人知道这种风格的任何例子我可以从中得到一些指示?

HTML

<div class="DateStyle"><span class="DateStyle_Date">21/01/2013</span><span class="DateStyle_Cross">x</span></div>

<div class="DateStyle"><span class="DateStyle_Date">11/02/2012</span><span class="DateStyle_Cross">x</span></div>

<div class="DateStyle"><span class="DateStyle_Date">08/05/2012</span><span class="DateStyle_Cross">x</span></div>

CSS

.DateStyle {
    display: inline-block;
    background-color: #4A4F54;
    color: #A4A7AA;
    font-weight: bolder;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 2px 6px 2px 8px;
    line-height: 1.2em;
}
.DateStyle_Date {
    padding-right: 5px;
    border-right: #A4A7AA dashed 1px;
}
.DateStyle_Cross{
    padding-left: 4px;
    height: 15px;
}

.DateStyle:hover {
    background-color: #5C6165;
}

JQuery的

$(document).ready(function() {
    $('.DateStyle_Cross').hover(function(){
        $(this).parent().css('background','#751919 ');
    }, function(){
        $(this).parent().css('background','#4A4F54');
    })
    $('.DateStyle').hover.css( 'cursor', 'crosshair' );
    $('.DateStyle_Cross').hover.css( 'cursor', 'crosshair' );
});

http://jsfiddle.net/pUb6q/

由于

0 个答案:

没有答案