Question

我有site我正在使用Sinatra框架，我已将其上传到Heroku。在Firefox上，我能够看到页面及其所有内容，但在Chrome上，所有文本，边框等的颜色都是白色。为什么这样做，我该如何解决？请注意，我也使用Zurb基础来构建HTML框架，使用Sinatra作为后端。

下面是我的CSS页面。

/* LAYOUT */
/*========*/
.the-page {
  -webkit-box-shadow: 4px 2px   rgba(0,0,0,.1),  -4px 0 2px  rgba(0,0,0,.1);
  -moz-box-shadow: 4px 0 2px  rgba(0,0,0,.1),  -4px 0 2px  rgba(0,0,0,.1);
  box-shadow: 4px 0 2px  rgba(0,0,0,.1),  -4px 0 2px  rgba(0,0,0,.1);
}

/* MISC */
/*======*/

.center {text-align: center;}

.brown {color: #653000;}

.green {color: #003218;}

a{color: #653000;}

a:hover {color: #003218;}

.size20 { font-size: 20px;}


/* Prevent MOZ border outline */
:focus {outline:none;}
::-moz-focus-inner {border:0;}

/* FOOTER */
/* ====== */


html, body {
  height: 100%;
  color: #653000;
}
.body-wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -65px;
}
.footer, .push {
  height: 65px;
}

.footer {
  color: black;

}

Answer 1

我在这里测试了Chrome 24，并查看了开发人员工具中应用的CSS规则。通过从row标记移除<html>类，我可以在Chrome中看到您的网站。

以下规则似乎是至少部分问题的根源。

.row:before,.row:after{content:" ";display:table}

Chrome根本不喜欢应用于display:table标记的<html>规则。

网站内容显示在Moz但不是Chrome

1 个答案: