Как решить эту проблему с перекрестным браузером?

Question

Когда я запускаю мой код в Крома это выглядит как

Когда я запускаю его в 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-radius был поддержан в Chrome на некоторое время теперь, так что вы должны использовать старую версию.