Question

我正在创建一个新网站作为学习体验，我遇到了CSS问题。

在Safari和Chrome中，它看起来不错。

在FireFox中，风格已关闭，我不明白为什么。

在IE浏览器中，它很糟糕，我的大多数风格都不起作用。

我昨天发布了有人在我的样式表的顶部推荐了CSS重置。这工作得相当好，从那里我做了一些改变，以使它成为它的形状。 FireFox和IE的差异无法正常工作我不遵循。

这是样式表：

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 2;
     background-image: url('media/background.png');
     width: 90%;
}

header {
    margin-top: 10px;
    margin-left: 30px;
    margin-right: auto;
    width: 70%;
}

AppleBlue { color: #009edc; }
ApplePurple { color: #934e84; }
AppleRed { color: #c55152; }
AppleOrange { color: #e19433; }
AppleYellow { color: #f2be2e; }
AppleGreen { color: #76b845; }

PostListing {
    margin-top: 20px;
    margin-left: 300px;
    text-align: left;
    float: left;
    width: 70%;
    border: 1px solid #3F4933;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    background-image: url('media/transwhite.png');
    line-height: 1;
}

a {
    color: #666666;
    text-decoration: none;
}

PostContent {
    font-size: 18px;
    font-weight: normal;
    font-style: italics;
    color: #666666;
}

PostTitle {
    font-size: 22px;
    font-style: normal;
    font-weight: bold;
    color: #666666;
}

PostTitleUnderline {
    font-size: 22px;
    font-style: normal;
    font-weight: bold;
    color: #666666;
    text-decoration: underline;
}

PostExcerpt {
    font-size: 14px;
    font-weight: normal;
    font-style: italics;
    color: #666666;
}

PostDate {
    text-align: right;
    float: right;
    font-size: 12px;
    font-weight: normal;
    font-style: italics;
    color: #666666;
}

ReturnHomeLink {
    text-align: right;
    float: right;
    font-size: 12px;
    font-weight: normal;
    font-style: italics;
    color: #666666;
}

BoxHouse {
  margin-left: 72px;
  margin-right: 20px;
}

FloatingBox {
  text-align: center;
  float: left;
  width: 220px;
  border: 1px solid #3F4933;
  padding: 12px;
  background-image: url('media/transwhite.png');
  margin-top: 10px;
  margin-left: 0.5em;
  margin-right: 5px;
  font-size: 22px;
    font-style: normal;
    font-weight: bold;
}

Answer 1

您使用的是非HTML元素，例如<FloatingBox>和<AppleBlue>，这会混淆Firefox的HTML解析器（也可能是IE的）。例如，如果查看Firebug中已解析的树，您将看到嵌套在<FloatingBox>中的大多数元素未被解析为嵌套在其中。

我建议只使用标准的HTML元素。如果您想纯粹为了在其上设置CSS属性而添加元素，例如<FloatingBox>和<AppleBlue>，则应使用<div>（对于块级元素）和{{ 1}}（对于内联元素）标签上带有<span>属性。例如，在您的HTML中：

class

在你的CSS中

<div class="FloatingBox">
  ...
  <span class="AppleBlue">Blog</a>
</div>

Answer 2

首先：某些问题可能是由于doctype标签无效...你的是＆lt;！DOCTYPE html＆gt ;,但你应该准确指定浏览器应遵循的标准，否则浏览器将进入'quirks'模式他们都以不同的方式呈现。

请改为尝试：

＆lt;！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在此处阅读有关doctypes的更多信息：

http://www.w3.org/QA/2002/04/valid-dtd-list.html

其次，floatbox的CSS应该是.floatingbox {/ somecss /} - “floatingbox”前面的点表示它是一个类。然后将该类连接到这样的HTML元素：＆lt; div class =“floatingbox”＆gt; {somecontent} lt; / div＆gt;

FireFox和IE中的CSS问题，我不明白为什么

2 个答案: