0

我的私人网页的主要内容在 Firefox 中没有奇怪地显示。页眉和页脚栏都显示,并且主要文本被放置在它们旁边的右侧。有时,页脚也会移到正文上方。我猜这是一个涉及我不知何故丢失的DIV定位的问题。[这个已经解决]

在 Chrome 中显示时,两个同样高的 DIV 的高度也不同。这个问题也出现在 Safari 中,但方式不同。在 Chrome 或 Firefox 中查看时,徽标和导航栏之间存在 1 px 的间隙。谁能想到一种方法来重置所有浏览器默认设置以防止将来发生类似的事情?

该网站目前尚未上线,我正在对其进行调试以进行最终发布。(我真的不想在目前的情况下发布它,因为它会让任何不使用 webkit 浏览器的人感到沮丧。)

另外,作为旁注,有人知道如何修复我在 Internet Explorer 9 中遇到的 CSS 错误吗?导航栏中的渐变消失了,某些区域缺少背景颜色,所有图片链接周围都有烦人的框。

编辑:我在一个在线 CSS 渐变生成器中看到了我需要做什么才能使渐变在 IE9 中工作。背景问题显然源于同一来源。

此外,Opera 中是否有人在http://jsbin.com/ipixay/1遇到最新调试版本的问题?(这要归功于 Sunyatasattva。)

小提琴的链接(代码发布在哪里)是:http: //jsfiddle.net/aaQSD/7/请原谅我仍然存在的 CSS 数量,但我不知道是哪个导致 Internet Explorer 9个问题。

我最好的猜测是 Firefox 的问题出在 CSS 的这一部分:

body {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: Times;
    background: #efefef url(pics/background.png) repeat top center;
}
#container {
    overflow:auto;
    width: 95%;
    min-height: 100%;
    min-width: 946px;
    margin: 0 auto 10px auto;
}
#content-wrapper {
    width: 100%;
    float: right;
    text-align: left;
    margin: 10px 0 0 0;
}
#content-inner {
    padding: 0 15px 0 15px;
}
.center-slide {
    font: normal 62.5%/1.5 Times;
    letter-spacing: 0;
    width: 900px;
    height: 485px;
    position: relative;
    padding: 20px 0 0 0;
    margin: 0 auto 0 auto;
    background-color: #FFFFFF;
    border-radius: 8px;
}
.boxes {
    margin: 0 auto 0 auto;
    width: 900px;
}
.left-box {
    float: left;
    background-color: #FFFFFF;
    border-radius: 8px;
    margin: 10px 5px 0 0;
    padding: 20px;
    width: 500px;
    position: relative;
}
.logo {
    width: 26%;
    text-align: center;
    float: left;
    font-family: Times;
    font-size: 65px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 10px 0 0 0;
    background-image: -moz-linear-gradient(0% 22px 90deg, #0B3474, #517ABA);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 70%, from(#517ABA), to(#0B3474));
}
header {
    width: 100%;
    min-width: 863px;
    background-color: #000047;
    float: left;
    padding: 10px;
    color: #FFFFFF;
    text-align: left;
    font-size: 20px;
    overflow: hidden;
    margin: 0 0 10px 0;
}
nav {
    background-color: #6a6a6a;
    font: 16px Times;
    min-width: 700px;
    float: right;
    width: 74%;
}
footer {
    font-family: Times;
    text-align: center;
    background-color: #000047;
    color: #FFFFFF;
    text-align: center;
    padding: 10px 0;
    width: 100%;
    min-width: 863px;
}

以下是已修复的事项列表:

  • 图片周围不需要的框/边框
  • 火狐显示问题
  • 有问题的页脚

编辑:我目前正在努力使用最少的代码来复制评论中建议的问题。我希望你能原谅我的愚蠢错误。谢谢,到目前为止所有回复的人!

编辑2:小提琴出来了!我已经删除了曾经在下面的潘多拉魔盒。

4

2 回答 2

0

我已经编辑了您的小提琴以使其正常工作。我基本上只是添加float: left;到您的#container. 您可以查看我的编辑以获取更多详细信息。http://jsfiddle.net/aaQSD/8/

于 2013-04-15T01:10:21.727 回答
0
于 2013-04-15T01:24:45.327 回答