Question

我遇到过一些我从未见过的东西：我构建的页面在Ubuntu上使用Firefox 31显示不同（正确）：

与Windows 7（不正确）：

此结果在另一台运行FF 31的Windows 7计算机上重现。我的HTML验证（W3C）。我的CSS验证（再次，W3C）并且是无棉的（CSS Lint）。我在这里做的并不奇怪。我对这一点的理解是浏览器是一个浏览器，因此与平台无关。有没有人对此行为有任何解释，以及有关如何补救的任何建议？提前谢谢。

HTML：

<!DOCTYPE HTML>
<html>
<head>
  <title>FortavaScript | The Simple Pendulum</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="description" content="This program solves the equation for the total energy of a simple pendulum to illustrate conservation of mechanical energy for large oscillations.">
  <meta name="keywords" content="simple, pendulum, period, oscillations, amplitude, nonlinear, gravity">
  <meta name="author" content="Joel" >
  <meta name="generator" content="Bluefish 2.2.5" >
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
    });
  </script>
  <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
  <script type="text/javascript" src="amp.js"></script>
  <script type="text/javascript" src="Flot/jquery.js"></script>
  <script type="text/javascript" src="Flot/jquery.flot.js"></script>
</head>
<body onload="amp()">
  <div class="header2">
    <h2>The Simple Pendulum</h2>
  </div>
  <div class="content">
    <p>A common example of a mechanical system that exhibits oscillatory motion is the simple pendulum. A simple pendulum is an idealized system consisting of a bob of mass $m$ attached to the lower end of a rigid rod of length $L$ and negligible mass. The default parameters of this program generate a stable numerical solution when simulating large amplitude oscillations.</p>
  </div>
  <div class="header3">
    <h3>Oscillations of a Pendulum</h3>
  </div>
  <div class="program">
    This program solves the equation for the total energy of a simple pendulum to illustrate conservation of mechanical energy for large oscillations.
  </div>
  <div class="model">
    $E = \frac{1}{2} m L^2 \omega^2 + m g L (1 - \cos \theta)$
  </div>
  <div class="form">
    <form id="pendulum">
      <table class="form">
        <tr>
          <td>
            <label><span class="rollover">Initial angle<span>0.0 &le; <i>&theta;</i> &le; 1.6 rad</span></span>, $\theta_0$, of the mass:</label>
            <input type="number" name="theta0" id="theta0" value="0.1" min="0.0" max="1.6" step="0.1"> rad
          </td>
        </tr>
        <tr>
          <td>
            <label><span class="rollover">Ratio<span>1.0 &le; <i>g</i>/<i>L</i> &le; 10.0</span></span> of $\frac{g}{L}$:</label>
            <input type="number" name="read_ratio" id="read_ratio" value="9.0" min="1.0" max="10.0" step="0.1">
          </td>
        </tr>
        <tr>
          <td>
            <label><span class="rollover">Initial angular velocity<span>0.0 &le; <i>&omega;</i> &le; 6.0 rad/sec</span></span>, $\omega_0$, of the mass:</label>
            <input type="number" name="omega_read" id="omega_read" value="0.0" min="0.0" max="6.0" step="0.1"> rad/sec
          </td>
        </tr>
        <tr>
          <td>
            <label><span class="rollover">Time-step<span>0.001 &le; <i>dt</i> &le; 0.1 sec</span></span>, $dt$, of the system:</label>
            <input type="number" onchange="three" name="dt_read" id="dt_read" value="0.01" min="0.001" max="0.1" step="0.001"> sec
          </td>
        </tr>
        <tr>
          <td>
            Period of the pendulum: <span id="output"></span> sec
          </td>
        </tr>
      </table>
      <input type="button" value="Evaluate" onclick="amp()">
    </form>
  </div>
  <div class="box">
    <div class="container">
      <div id="placeholder" class="placeholder"></div>
    </div>
  </div>
  <div class="download">
    <a class="fortran" href="amp.f08">Download the original Fortran source</a>
    |
    <a class="java" href="amp.java">Download the translated Java source</a>
    |
    <a class="js" href="amp.js">Download the JavaScript</a>
  </div>
  <div class="mail">
    <p class="feedback">
      <a class="physics" href="mailto:physics@suddenlink.net?subject=The%20Simple%20Pendulum">Errata</a>
    </p>
  </div>
  <div class="center"><!-- W3C -->
    <p class="center">
      <a class="badge" href="http://validator.w3.org/check?uri=http%3A%2F%2Fpages.suddenlink.net%2Fphysics%2Famp.htm">
        <img src="HTML5_Badge_32.png" alt="Valid HTML!">
      </a>
      <img src="valid-css-blue.png" alt="Valid CSS!">
    </p>
  </div>
  <div class="footer">
    Copyright &copy; 2014 Joel DeWitt
  </div>
  <div class="fortavascript"><a href="index.htm">FortavaScript</a></div>
</body>
</html>

CSS：

body {
  background: url(background.png) repeat-x;
  font: 18px/1.5em "proxima-nova", Helvetica, Arial, sans-serif;
}
a {
  border: 1px solid ghostwhite;
  text-decoration: none;
}
a:hover { border: 1px solid coral }
a:focus {
  border: 1px dashed red;
  outline: none;
  text-decoration: none;
  background-color: ghostwhite;
}
.rss a:hover {
  border: 1px solid ghostwhite;
  background-color: transparent;
  text-decoration: none;
}
.rss a:focus { border: 1px dotted red }
.icon {
  width: 28px;
  height: 28px;
  display: inline-block;
}
.link { color: blue }
.link:hover {
  border: 1px solid aquamarine;
  background-color: aquamarine;
}
.link:focus {
  border: 1px dotted red;
  outline: none;
  text-decoration: none;
  background-color: ghostwhite;
}
.what { color: darkmagenta }
.header2 {
  position: relative;
  width: 916px;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
  vertical-align: middle;
  font-weight: bold;
  text-decoration: none;
  color: black;
  font: normal 28px "omnes-pro", Helvetica, Arial, sans-serif;
}
.about {
  width: 916px;
  margin: 0 auto;
  margin-bottom: 15px;
  font-size: larger;
  color: chocolate;
}
.content {
  width: 916px;
  margin: 0 auto;
  font-family: "Computer Modern", "Computer Modern Roman", "Latin Modern", "Cambria Math", serif;
  font-size: 15pt;
}
p { text-align: justify }
.header3 {
  position: relative;
  width: 855px;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
  font: normal 22px "omnes-pro", Helvetica, Arial, sans-serif;
  color: #666;
}
.program {
  width: 855px;
  margin: 0 auto;
  color: chocolate;
  text-align: justify;
  font-size: larger;
}
.model {
  width: 855px;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
  color: black;
}
div.form {
  width: 855px;
  margin: 0 auto;
}
table.form {
  border-spacing: 10px;
  width: 855px;
  font-family: "Computer Modern", "Computer Modern Roman", "Latin Modern", "Cambria Math", serif;
  font-size: 15pt;
}
span.rollover {
  position: relative;
  border: none;
  color: black;
  border-bottom: 2px dotted red;
}
span.rollover span {
  visibility: hidden;
  position: absolute;
  background-color: white;
  padding-left: 7px;
  padding-right: 7px;
  border: 1px solid red;
  color: navy;
  font-family: "Computer Modern", "Computer Modern Roman", "Latin Modern", "Cambria Math", serif;
  text-decoration: none;
  border-radius: 10px 10px 10px 0;
  opacity: 0.9;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
span.rollover:hover span {
  visibility: visible;
  top: -30px;
  z-index: 50;
}
input {
  box-sizing: border-box;
  font: 15pt "Computer Modern", "Computer Modern Roman", "Latin Modern", "Cambria Math", serif;
  color: indigo;
  border: 1px solid darkseagreen;
  background-color: snow;
  width: 10%;
}
input[type=number] {
  border-left-style: none;
  border-right-style: none;
}
input[type=number]:focus {
  outline: none;
  color: black;
  border: 1px solid black;
  background-color: white;
  border-left-style: none;
  border-right-style: none;
}
input[type=button] {
  margin-left: 10px;/*same as border-spacing*/
  margin-top: 5px;
  padding: 5px;
  border-radius: 7px;
  color: indigo;
  border: 2px solid #8595B2;
  background-color: ghostwhite;
  font: 18px "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
}
input[type=button]:hover { border: 2px solid orange }
input[type=button]:focus {
  outline: none;
  color: black;
  border: 2px solid fuchsia;
  background-color: aliceblue;
}
.box {
  width: 855px;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
}
.container {
  box-sizing: border-box;
  width: 825px;
  height: 437px;
  /*top, right, bottom, left*/
  margin: 15px auto 15px auto;
  background: white;
}
.placeholder {
  width: 100%;
  height: 100%;
  font-size: 14px;
  line-height: 1.2em;
}
.download {
  text-align: center;
  width: 855px;
  margin: 0 auto;
  margin-bottom: 15px;
}
.js { color: purple }
.fortran { color: brown }
.java { color: deeppink }
div.mail {
  width: 855px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}
.mail a:hover {
  background-color: lightyellow;
  text-decoration: none;
  border: 1px solid lime;
}
.mail a:focus { background-color: lightyellow }
.feedback {
  text-align: center;
  vertical-align: middle;
  font-size: small;
  font-family: "omnes-pro", Helvetica, Arial, sans-serif;
}
.physics {
  width: 85px;
  display: inline-block;
  text-transform: uppercase;
  color: navy;
}
div.center {
  width: 855px;
  margin-left: auto;
  margin-right: auto;
}
div.center a:hover {
  background-color: transparent;
  text-decoration: none;
}
p.center { text-align: center }
.badge {
  width: 32px;
  height: 32px;
  display: inline-block;
}
.badge:hover { border: 1px solid ghostwhite }
.badge:focus { border: 1px dotted red }
.footer {
  width: 855px;
  /*top, right, bottom, left*/
  margin: 15px auto 15px auto;
  text-align: center;
  font-size: 12px;
  color: #999;
}
.total {
  font-family: times, "Times New Roman", times-roman, georgia, serif;
  font-size: 28px;
  line-height: 40px;
  letter-spacing: -1px;
  color: #444;
  width: 850px;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
}
.number { color: deeppink }
.date {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: navy;
  font-size: 14px;
  font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
  font-weight: 100;
  width: 850px;
  margin: 0 auto;
}
.headline {
  font: bold 34px "Century Schoolbook", Georgia, Times, serif;
  color: #333;
  line-height: 90%;
  letter-spacing: -2px;
  width: 850px;
  margin: 0 auto;
  margin-top: 1px;
  margin-bottom: 1px;
}
.tag {
  color: darkgreen;
  font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
  width: 850px;
  margin: 0 auto;
  margin-bottom: 15px;
  text-align: justify;
}
.fortavascript {
  font: bold 20px "omnes-pro", Helvetica, Arial, sans-serif;
  background-color: navy;
  padding: 7px;
  top: 0;
  right: 0;
  position: fixed;
  z-index: 5000;
  border-bottom-left-radius: 10px;
  opacity: 0.3;
}
.fortavascript:hover { opacity: 1.0 }
.fortavascript a {
  color: white;
  border: none;
  text-decoration: none;
}
.fortavascript a:hover { background-color: navy }
.fortavascript a:focus {
  color: white;
  background-color: navy;
}

页面草稿为here。

Answer 1

我建议使用CSS reset。这些是为了规范浏览器的特性，使您更容易在浏览器中保持一致的外观。使用CSS重置时，您通常需要手动设置您认为可以为您完成的元素，例如将font-weight: bold;添加到strong和b元素，添加一些底部段落元素的边距等。就个人而言，我喜欢Yahoo's CSS reset。

另外，检查您是否正确导入proxima-nova字体，即使您的CSS后备应该没问题。

Answer 2

在我的文档中放入内联MathJax符号时，问题最终与我选择的字体（Computer Modern）有关。例如，我已将CSS字体选项简化为font: 1em "Computer Modern", serif;，并将其补充为：

@bulletproof-font-face {
  font-family: "Computer Modern";
  src: url('cmunss-webfont.woff') format('woff');
}
@bulletproof-font-face {
  font-family: "Computer Modern";
  src: url('cmunsx-webfont.woff') format('woff');
  font-weight: bold;
}
@bulletproof-font-face {
  font-family: "Computer Modern";
  src: url('cmunsi-webfont.woff') format('woff');
  font-style: italic, oblique;
}
@bulletproof-font-face {
  font-family: "Computer Modern";
  src: url('cmunbxo-webfont.woff) format('woff');
  font-weight: bold;
  font-style: italic, oblique;
}

...关注this post以及此问题CSS-Tricks。请注意，我根据CSSLint的建议将@font-face更改为@bulletproof-font-face。

使用Firefox 31，页面在Ubuntu与Windows 7上的显示方式不同

2 个答案: