个人中心
gpt4 book ai didi

html - 使用 Firefox 31 在 Ubuntu 和 Windows 7 上页面显示不同

转载 作者：太空宇宙 更新时间：2023-11-04 13:05:51 25 4
gpt4 key购买 nike

我遇到了以前从未见过的事情:我在 Ubuntu 上使用 Firefox 31 构建的页面显示不同(正确):

https://www.dropbox.com/s/th3d6n4fox2uza6/FF2.png

与 Windows 7(不正确):

https://www.dropbox.com/s/576aqmwiw02kvad/FF1.png

此结果在另一台运行 FF 31 的 Windows 7 计算机上重现。我的 HTML 验证 (W3C)。我的 CSS 验证(同样是 W3C)并且没有 lint(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 .

最佳答案

我建议使用 CSS reset .这些旨在标准化浏览器的特性，并使您更容易在浏览器之间保持一致的外观。使用 CSS 重置时，您通常需要手动设置您认为会为您完成的元素的样式，例如将 font-weight: bold; 添加到 strong和 b 元素，为段落元素添加一些底边距等。就我个人而言，我喜欢 Yahoo's CSS reset .

此外，请检查您是否正确导入了 proxima-nova 字体，即使您的 CSS 回退应该没问题。

关于html - 使用 Firefox 31 在 Ubuntu 和 Windows 7 上页面显示不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25142051/

25 4 0
文章推荐： c++ - 命中 GDB 断点时自动调用应用程序代码中的函数
文章推荐： C++仅从数组中获取数据的中间部分
文章推荐： html - 学校网站帮助 : Template Element Extends Too Far Right
文章推荐： javascript - 如果某些手机的分辨率高于计算机，我如何使用@media 查询？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com