Question

我正在构建一个非常简单的网页（只是HTML / CSS）。我在chrome和firefox之间如何显示网页时遇到了一些问题。 Chrome显示的东西要小得多，它们位于屏幕上的不同位置。我希望我的两个div在firefox中彼此相邻，就像他们在Chrome中一样。看图像： How the code renders in Chrome和 How the code renders in Firefox

我已经在我的CSS 中放置了CSS重置，检查以确保两个浏览器上的缩放正常，并且完成了我的所有宽度在/ em中调整大小，或％。

PS - 我知道我使用的ID不正确。

对于这种情况发生原因的任何解释都会有所帮助。谢谢！

以下是孤立的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=true;">
    <link rel="stylesheet" type="text/css" href="example.css">
    <link rel="stylesheet" href="img/font-awesome-4.4.0/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Merriweather:400,900italic,900|Lato:400,400italic' rel='stylesheet' type='text/css'>
   </head>
  <body>
    <div id="pageWrapper"> <div id="contentWrapper">
          <div class="wrapper">
             <section id="checkList">
              <h1>Want to become an Interpreter?</h1>
              <ul id="services">
                <li>
                  Q: --------------------
                </br>
                 <span id="textHighlight"> A: ------------------------------
                 </span>
                </li>
                <li>
                  Q: --------------------------------------------------------
                </br>
                  <span id="textHighlight">A: --------------------------------------------------------</span>
                </li>
                <li>
                  Q: ----------------------------------
                </br>
                  <span id="textHighlight">A: -------------------</span>
                </li>
                <li>
                  Q: -----------------
                </br>
                  <span id="textHighlight">A: ---------------------</span>
                </li>
              </ul>
            </section>
            <section id="calendar">
            <h2>Upcoming Course Dates<h2>
              <ul>
                <li>January 22</li>
                <li>January 23</li>
                <li>January 29</li>
                <li>January 30</li>
                <li>February 5<li>
                <li>February 6<li>
              <ul>
            </section>
        </div>
    </div>
  </body>
</html>

CSS：

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
div {
    min-height:1px;
}
ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

del {
    text-decoration: line-through;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}


input, select {
    vertical-align:middle;
}
/*end CSS reset*/
/*end CSS reset*/
/*end CSS reset*/

/*BEGIN general page wrapper styles*/
#pageWrapper{
    width: 100%;
    height: 100%;
    margin:0 auto;
}

#contentWrapper{
    width: 100%;
    height: 100%;
    position:relative;
    display:inline-block;
    clear:both;
    margin-bottom: 2em;
}
.wrapper{
    clear:both;
    position: relative;
    clear:both;
    width:70%;
    margin:0 auto !important;
}
/*END GENERAL WRAP STYLES*/

#checkList ul{
    margin:1em;
    padding:1em;
}
#checkList ul li{
    line-height: 165%;
    font-size: 1em;
}
#checkList h3{
    margin-top:.5em;
    text-align: center;
    font-family: 'Lato', sans-serif;
}
#checkList h1{
    font-size: 3em;
    color:#649FB3;
    text-align: center;
}
#checkList{
    width:50%;
    border: 2px solid #A9BDC4;
    padding:1em;
    border-top-right-radius: 5%;
    border-top-left-radius: 5%;
    display:inline-block;
    float:left;
    box-sizing: border-box;
}

#calendar{
    float:left;
    display:inline-block;
    background-color:  #4A6E6E;
    padding:2em;
    color:white;
    border-radius: 10px;
    font-size: 1em;
    margin-left:3em;
    width:40%;
}
#calendar li{
    font-size: .75em;
    line-height: 150%;
}
#calendar h2{
    border-bottom: 1px solid white;
}
#googleCalendar{
    width:45%;
    margin:1em;
    display:inline-block;
    float:right;
}

#textHighlight{
    color:#4A6E6E;
}

为什么我的DIV在chrome和firefox中的渲染方式不同？

0 个答案: