Question

我不确定屏幕的分辨率是否会影响CSS。我的屏幕分辨率是1280 x 1024.

上次，我在朋友的笔记本电脑上尝试了我的网站：http://alexchen.co.nr/，我的网页和元素（我认为是#lang）移动到位（我认为它只发生在Chrome中）。

在我的电脑上一切都很好（Firefox，Chrome，IE6,7,8等）

/* tags */
body {
    background: #FFF;
    color: #666;
    font-family: Arial, "MS Trebuchet", sans-serif;
    font-size: 75%;
}
h1 {
    font-size: 28px;
}
h2 {
    color: #DDD;
    font-size: 18px;
    padding: 0 0 10px 0;
}
h3 {
    color: #666;
    font-size: 10px;
    font-weight: 700;
    padding: 0 0 10px 0;
    text-transform: uppercase;
}
p {
    line-height: 160%;
}
a {
    /*color: #0AE;*/
    color: #08B;
    list-style: none;
    text-decoration: none;
}
a:hover {
    color: #044;
}
/* structure */
.container {
    overflow: hidden;
    width: 960px;
}
/* header */
#header {
}
#header h1 {
    padding: 190px 20px 5px;
    overflow: hidden;
}
#header h1 a {
    background: url(../images/logo.png) no-repeat scroll 0 0;
    float: left;
    text-indent: -9999px;
    width: 216px;
    height: 28px;
}
/* banner */
#lang {
    float: right;
    padding: 202px 0 0 0;
}
#lang li {
    float: left;
}
#lang li a {
    float: left;
    font-size: 8px;
    padding: 0 5px;
    text-transform: uppercase;
}
#lang li.current a {
    color: #666;
    cursor: default;
    border-bottom: 0px;
}
/* intro */
#banner {
    overflow: hidden;
    width: 960px;
}
#banner h3 a {
    font-size: 28px;
}
#logo {
    background-color: #222;
    float: left;
    overflow: hidden;
    height: 169px;
    width: 240px; /* ie6 hack */
    height: 240px; /* ie6 hack */
}
#logo2 {
    background: -moz-linear-gradient(top, #FFF, #DDD);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD));
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#FFFFFF', EndColorStr='#DDDDDD');
    background-color: #DDD;
    float: left;
    overflow: hidden;
    height: 169px;
    width: 240px; /* ie6 hack */
    height: 240px; /* ie6 hack */
}
#logo3 {
    background: -moz-linear-gradient(top, #FFF, #DDD);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD));
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#FFFFFF', EndColorStr='#DDDDDD');
    background-color: #DDD;
    float: left;
    overflow: hidden;
    height: 169px;
    width: 240px; /* ie6 hack */
    height: 240px; /* ie6 hack */
}
#nav {
    float: left;
    padding: 200px 0 0 40px;
}
#nav li {
        float: left;
}
#nav li a {
    float: left;
    border-left: 1px solid #08B;
    font-size: 10px;
    padding: 0 10px;
    text-transform: uppercase;
}
#nav li.current a {
    color: #888;
    cursor: default;
    border-bottom: 0px;
}
#tagline {
    float: left;
    margin: 0 40px 0 0;
    width: 540px; /* 560 */
}
#tagline h3 {
    font-size: 24px;
}
/* work */
#content {
    color: #888;
}
.showcase {
    overflow: hidden;
    width: 960px; /* ie hack */
}
.first {
    background: #222;
    display: inline; /* ie6 hack */
    float: left;
    overflow: hidden;
    position: relative;
    width: 240px;
    height: 240px;
}
.first h3, .first p {
    color: #DDD;
    padding: 20px;
}
.pusher {
    background: #333;
    display: inline; /* ie6 hack */
    float: left;
    overflow: hidden;
    position: relative;
    width: 240px;
    height: 240px;
}
.blank-pusher {
    background: #DDD;
    display: inline; /* ie6 hack */
    float: left;
    overflow: hidden;
    position: relative;
    width: 240px;
    height: 240px;
}
.pusher h3 {
    color: #DDD;
    padding: 120px 20px 10px;
}
.pusher p {
    color: #DDD;
    padding: 0 20px;
}
.nopic {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.pic {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
}
.pic:hover {
    opacity: 0.1;
    filter: alpha(opacity = 10);
}
#fancybox-outer {
    height: 100% !important;
}
#fancybox-inner {
    height: 100% !important;
}
#inline1, #inline2, #inline3, #inline4, #inline5, #inline6, #inline7, #inline8 {
    width: 680px;
}
#inline1 img, #inline2 img, #inline3 img, #inline4 img, #inline5 img, #inline6 img, #inline7 img, #inline8 img {
    margin: 0 0 10px 0;
}

（继续...）

正常显示：

alt text http://img202.imageshack.us/img202/9638/normale.png

显示异常

alt text http://img199.imageshack.us/img199/2846/notnormal.png

我想我在朋友的笔记本电脑中，某些元素的水平宽度，填充或边距是重复的。

我将#lang内的文字缩小了一点，但不确定问题是否仍然存在。

我的网页：http://alexchen.co.nr/是否在您当前的屏幕分辨率（IE，Firefox和Chrome）中正确显示？

如果不是我该如何解决？是什么导致了这个问题？

Answer 1

查看您的网站对于不同的计算机，操作系统和浏览器的外观，请查看http://browsershots.org/。

我刚刚提交了一份工作here。您的网站加载速度非常慢（请尝试YSlow或Page Speed以了解如何加快速度），以便某些浏览器在完成之前超时，您会看到一个空白屏幕。

尝试找出朋友的精确操作系统，浏览器类型和浏览器版本。例如，如果他使用Chrome 4并且您使用的是Chrome 5，则结果可能会有所不同。

HTML / CSS元素在其他计算机中失去了位置，但在我的计算机中却没有

1 个答案: