jquery - 如何解决这个跨浏览器问题？

Question

当我在 Crome 中运行我的代码时，它看起来像

当我在 Firefox 中运行它时，它看起来像

我希望到处都能看到火狐的景色。我该如何解决这个问题。我的代码如下

@{
    ViewBag.Title = "Home Page";
}
<link href="../../Content/css/jq.stopwatch.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/js/jq.stopwatch.js" type="text/javascript"></script>

<input type="submit" id="createNew" name="AddNewTask" value="Add New Task" />
<div id="form">

</div>
<div id="tasks">

</div>

<style>
    #createNew {
       margin-left : 450px;
        margin-bottom : 10px ;
    }
    #taskDiv{
        background-color: #669900;
        height: 300px;
        width: 240px;
        float: left;
        border-radius: 8px;
        margin-left: 25px;
        margin-bottom: 10px;
    }
    #taskNameId {
        color : white ;
        margin: 5px 15px 15px 5px;
    }
    #taskCategoryId {
        color : white ;
         margin: 5px 15px 5px 5px;
    }
    .timerDiv {
         color : white ;
         margin: 5px 15px 5px 36px;
    }
    #taskDescriptionId{
        color : white ;
         margin: 5px 15px 5px 5px;
    }
    #taskDescriptiontextareaId {
        margin-left: 18px;
        width : 200px ;
        border-radius : 10px ;
    }

    #taskListId {
        margin-left : 20px ;
        border-radius: 10px;
        width : 124px ;
    }
    #taskCategoryListId {
        border-radius: 10px;
        width : 124px ;
    }
</style>
<script type="text/javascript">
    var counter = 0;

    $("#createNew").click(function () {
        $(".closed").css("background-color", "#0099CC");
        $(".closed").css("height", "200");
        $(".dropdownClass").attr("disabled", "disabled");
        $(".taskDescriptiontextareaClass").attr("disabled", "disabled");
        $("#stopwatch").replaceWith('<div class="timerDiv">'+"Time Duration:" + $(".hr").html() + ":" + $(".min").html() + ":" + $(".sec").html() + '</div>');
        createNewTask().appendTo("#main");
        var mainHeight = $("#main").css("height");
        if (mainHeight <= '300px' || (counter % 4 == 0)) {
            $("#main").css("height", parseInt(mainHeight) + 300 + 'px');
        }
        counter++;

    });

    function createNewTask() {
        var newDiv = $('<div>')
            .attr({ Class:'closed',id: 'taskDiv' });
        newDiv.append(createTask());
        newDiv.append(createTaskCategory());
        newDiv.append(createTaskDescription());
        newDiv.append(getStopwatchDiv());
        return newDiv;
    }

    function getStopwatchDiv() {
        var stopwatchDiv = $('<div>').attr({ Class:'stopwatchClass',id: 'stopwatch' });
        stopwatchDiv.stopwatch('theme-1');
        return stopwatchDiv;

    }

    function createTask() {
        var taskName = $('<label>').attr({id:'taskNameId'}).text('Task Name:');
        createTaskDropdown().appendTo(taskName);
        return taskName;
    }

    function createTaskCategory() {
        var taskCategory = $('<label>').attr({ id: 'taskCategoryId' }).text('Task Category:');
        createTaskCategoryDropdown().appendTo(taskCategory);
        return taskCategory;
    }

    function createTaskDescription() {
        var taskDescription = $('<label>').attr({  id: 'taskDescriptionId' }).text('Task Description:');
        var textArea = $('<textarea/>').attr({ Class: 'taskDescriptiontextareaClass', id: 'taskDescriptiontextareaId' });
        textArea.appendTo(taskDescription);
        return taskDescription;
    }

    function createTaskDropdown() {
        var data = ["Select Task", "TaskA", "TaskB", "TaskC"];
        var taskList = $('<select />').attr({ Class:'dropdownClass',id: 'taskListId' });

        for (var val in data) {
            $('<option />', { value: val, text: data[val] }).appendTo(taskList);
        }
        return taskList;
    }

    function createTaskCategoryDropdown() {
        var data = ["Select Task ", "CategoryA", "CategoryB", "CategoryC"];
        var taskCategoryList = $('<select />').attr({ Class: 'dropdownClass', id: 'taskCategoryListId' });

        for (var val in data) {
            $('<option />', { value: val, text: data[val] }).appendTo(taskCategoryList);
        }
        return taskCategoryList;
    }

</script>

Answer 1

也使用供应商前缀版本border-radius。例如：

border-radius: 8px;

应改为：

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

border-radiusChrome 已经支持一段时间了，所以你必须使用旧版本。