相关疑难解决方法(0)

我正在研究一个jQuery主题,其中包括尽可能多的表单元素的样式.最初它是为Webkit(Chrome)开发的.现在我想让它也适用于Firefox.

问题是; Firefox在某些特定于Webkit的语法方面存在问题.

例如:

input[type="range"]::-webkit-slider-thumb,
input[type=radio],
input[type=checkbox] {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid black;
    background: #666666 url(images/ui-bg_highlight-soft_50_666666_1x100.png) 50% 50% repeat-x;
}

问题是input[type="range"]::-webkit-slider-thumb,有点.删除它,Firefox工作正常.它也可以用于其他语法::-webkit-file-upload-button,::selection以及使用::-webkit-...标签的所有其他内容.它识别它自己的::-moz-...标签,::-moz-selection虽然很好.

Webkit似乎只是忽略了::-moz-标签.

是否有任何方便的方法使Firefox忽略::-webkit-...标签或以其他方式处理此问题而无需维护每个CSS块的多个副本？

使用最新版本的Chrome和Firefox.

JS

$(document).ready(function () {
    $(":input[data-watermark]").each(function () {
        $(this).val($(this).attr("data-watermark"));
        $(this).bind('focus', function () {
            if ($(this).val() == $(this).attr("data-watermark")) $(this).val('');
        });
        $(this).bind('blur', function () {
            if ($(this).val() == '') $(this).val($(this).attr("data-watermark"));
            $(this).css('color','#a8a8a8');
        });
    });
});

HTML

<label>Name: </label>
<input class="input" type="text" name="name" maxlength="" data-watermark="My Name" />

CSS

.input{
    width:190px;
    height:16px;
    padding-top:2px;
    padding-left:6px;
    color:#000;
    font-size: 0.688em;
    border:#8c9cad 1px solid;
}

我想要解决的是,每当水印的输入值为文本颜色应为灰色(#a8a8a8)时.当值是用户写的东西时,颜色应该是黑色.

这是小提琴:http://jsfiddle.net/qGvAf/

链接在这里:

http://jsfiddle.net/LDEt6/

第一个CSS规则设置字体系列'Helvetica Neue', Helvetica, Arial, sans-serif;和下面的CSS中的所有其他字体设置只是在Chrome 21中声明'inherit'..然而我得到"Times"作为计算字体系列而在Firefox中我得到'serif ".我错过了什么？

谢谢!