CSS Div，需要它在Firefox和Safari中工作

时间：2009-02-05 20:34:12

标签： css

我有一个网页和文件，在最新版本的IE中显示正常。需要它在最新版本的Firefox和Safari中显示相同内容。

将网页和支持文件存档以供审核。我将粘贴下面的页面，然后是CSS。用图像更容易看到。

HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="top"><img src="top.jpg" width="800" height="115" /></div>
<div id="wrap">
  <div id="left">
    <div id="left_top">
      <div id="left_grey">
        <h1 class="lb_blk_hdr">Water. Pure and Simple</h1>
        <p class="text">United Distributors, Inc. is the region’s top   provider of Water Treatment Solutions and Supplies. For over 30 years, you have   trusted us to provide the latest in <a href="brandpg.html" target="_self" class="text">water treatment</a> technology and related products. We have met   your needs through a broad range of products that provide you the purest of   water for use in your <a href="home_solutions.html" target="_self" class="text">Home</a>, <a href="office.html" target="_self" class="text">Office</a>, <a href="food_service.html" target="_self" class="text">Restaurant /Food Service</a> and <a href="medical.html" target="_self" class="text">Medical Facilities</a> and <a href="commercial_ind.html" target="_self" class="text">Commercial/Industrial   facilities</a>. </p>
        <p class="text">Call us today. With over 80 years combined   experience, our Certified Staff can be called upon to share their experience and   expertise with you. At United Distributors we not only provide you with water   solutions, our Certified Staff accurately installs your treatment equipment and   ensures your system is maintained for the highest level of quality   water.</p>
        <p class="text">Let us help you enjoy the healthy benefits of   safe, pure water.</p>
        <h1 class="lb_blk_hdr">Our Promise to You...</h1>
        <p class="text">We are committed to market   innovative and creative <a href="brandpg.html" target="_self" class="text">water   treatment</a> and water related products to meet and fulfill your needs. We’ll   provide you with experienced and educated service professionals who proudly   represent our company, products, business associates and community. </p>
      </div>
    </div>
    <div id="left_bot">
      <p><span class="lg_blue_hdr">Our Guarantee</span></p>
      <p class="text"> United Distributors, Inc. guarantees your   customer satisfaction. Our water treatment solutions are manufactured by some of   the most trusted companies in the water treatment industry.</p>
    </div>
  </div>
  <div id="right">
    <div id="fla"><img src="fla.gif" width="430" height="380" /></div>
    <div id="right_bot"><img src="bbb_logos.gif" width="430" height="160" vspace="50" /></div>
  </div>
  <div id="bottom">Content for  id "bottom" Goes HereHereContent for  id "left_bot" Goes HereContent for  id "left_bot" Goes HereContent for  id "left_bot" Goes Here </div>
</div>
</body>
</html>

CSS 

@charset "utf-8";
body {
    background: #EEEEE4;
}
.lg_blue_hdr {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #000066;
    line-height: 10px;
}
.lb_blk_hdr {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #000000;
    line-height: 10px;
}
.text {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 17px;
    color: #000000;
}
a.text:link {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #003366;
    text-decoration: underline;
}
a.text:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #009900;
    text-decoration: underline;
}


#wrap {
    background: url(blue_white_bkgd.gif) repeat-y 50% 0%;
    margin: 0px auto auto;
    padding: 0px;
    width: 800px;
}
#top {
    margin: 0px auto;
    padding: 0px;
    width: 800px;
}
#left {
    margin: 0px;
    padding: 0px;
    float: left;
    width: 370px;
    background: url(none);
}
#left_top {
    background: D9DAD5 repeat-y 50% 0%;
    margin: 0px;
    padding: 0px;
    width: 370px;
}
#left_grey {
    background: #D9DAD5;
    margin: 0px;
    padding: 15px;
    width: 340px;
}
#left_bot {
    margin: 0px;
    padding: 15px;
    width: 340px;
}


#right {
    margin: 0px;
    padding: 0px;
    float: right;
    width: 430px;
}
#bottom {
    background: #000000;
    float: left;
    width: 770px;
    margin: 0px;
    padding: 15px;
}

2 个答案:

答案 0 :(得分：5)

如果您可以将我们指向页面的实时版本，那将会非常有用。有很多东西会影响浏览器中的页面显示（标准或怪癖渲染模式，doctypes，有效/无效的HTML和CSS等）。

目前，您的问题中没有足够的信息让人们准确地找出问题的根源。

另外，请记住，Firefox和Safari最有可能“正确”呈现您的页面。但是因为你已经为IE编写代码，所以你可能已经编写了CSS，使其在IE中看起来很好，但代价是符合标准的浏览器。

编辑：使用上面格式正确的代码，我稍微重构了一下你的代码。在编写HTML时，使用class和id属性来描述它的内容是什么，而不是它的外观，这被认为是最佳做法。所以“标题”而不是“顶部”和“内容”而不是左边。

这个更简单的代码也应该更容易调试。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"><img src="top.jpg" width="800" height="115" /></div>
<div id="wrap">
  <div id="content">
    <div id="left_top">
      <h2>Water. Pure and Simple</h2>
      <p>United Distributors, Inc. is the region’s top   provider of Water Treatment Solutions and Supplies. For over 30 years, you have   trusted us to provide the latest in <a href="brandpg.html" target="_self">water treatment</a> technology and related products. We have met   your needs through a broad range of products that provide you the purest of   water for use in your <a href="home_solutions.html" target="_self">Home</a>, <a href="office.html" target="_self">Office</a>, <a href="food_service.html" target="_self">Restaurant /Food Service</a> and <a href="medical.html" target="_self">Medical Facilities</a> and <a href="commercial_ind.html" target="_self">Commercial/Industrial   facilities</a>. </p>
      <p>Call us today. With over 80 years combined experience, our Certified Staff can be called upon to share their experience and expertise with you. At United Distributors we not only provide you with water solutions, our Certified Staff accurately installs your treatment equipment and ensures your system is maintained for the highest level of quality water.</p>
      <p>Let us help you enjoy the healthy benefits of safe, pure water.</p>

      <h2>Our Promise to You...</h2>
      <p>We are committed to market innovative and creative <a href="brandpg.html" target="_self">water treatment</a> and water related products to meet and fulfill your needs. We’ll provide you with experienced and educated service professionals who proudly represent our company, products, business associates and community. </p>
    </div>
    <div id="left_bot">
      <h2 class="blue">Our Guarantee</h2>
      <p> United Distributors, Inc. guarantees your customer satisfaction. Our water treatment solutions are manufactured by some of the most trusted companies in the water treatment industry.</p>
    </div>
  </div>
  <div id="images">
    <img src="fla.gif" width="430" height="380" />
    <img src="bbb_logos.gif" width="430" height="160" vspace="50" />
  </div>
  <div id="footer">Content for  id "bottom" Goes HereHereContent for  id "left_bot" Goes HereContent for  id "left_bot" Goes HereContent for  id "left_bot" Goes Here </div>
</div>
</body>
</html>

CSS：

@charset "utf-8";

body {
    background-color: #EEEEE4;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 17px;
    color: #000000;
}
h2 {
    font-size: 15px;
    line-height: 10px;
}
h2.blue {
    color: #000066;
}
a:link {
    font-size: 12px;
    font-weight: bold;
    color: #003366;
    text-decoration: underline;
}
a:hover {
    font-size: 12px;
    font-weight: bold;
    color: #009900;
    text-decoration: underline;
}


#wrap {
    background: url(blue_white_bkgd.gif) repeat-y 50% 0%;
    margin: 0px auto;
    padding: 0px;
    width: 800px;
}
#header {
    margin: 0px auto;
    padding: 0px;
    width: 800px;
}
#content {
    margin: 0px;
    padding: 0px;
    float: left;
    width: 370px;
    background: url(none);
}
#left_top {
    background: #D9DAD5;
    margin: 0px;
    padding: 15px;
    width: 340px;
}
#left_bot {
    margin: 0px;
    padding: 15px;
    width: 340px;
}


#right {
    margin: 0px;
    padding: 0px;
    float: right;
    width: 430px;
}
#footer {
    clear: both;
    background: #000000;
    width: 770px;
    margin: 0px;
    padding: 15px;
    color: white;
}

答案 1 :(得分：2)

我创建了一个HTML文件，添加了CSS，并创建了虚拟图像来替换应该存在的图像。这是IE 7上覆盖的Mac Firefox 3.0.6的屏幕截图：

http://s622.photobucket.com/albums/tt302/ellen898945/?action=view&current=Firefox_IE.png

使用您发送的代码，文件与我看起来几乎完全相同，减去了一些文本呈现差异。您能否更好地描述您遇到的问题，或提供可视化示例？您没有使用任何特别棘手的CSS，或者在任何主流浏览器上都不支持的CSS;我很难理解你的担忧。

通常，您必须接受您无法完全控制您发送的网页。您可以让用户将其文本大小设置为大于或小于默认值，或者始终将页面背景设置为白色并忽略您的颜色。如果渲染在不同操作系统上的不同浏览器中被几个像素关闭，那么这并不是什么大问题。实际上，没有用户会（a）在两个不同的网络浏览器中并排打开同一页面（b）注意它们有点不同而且（c）关心。

相关问题
最新问题