我不确定屏幕的分辨率是否会影响CSS。我的屏幕分辨率为1280 X 1024。HTML/CSS元素在其他计算机中失去位置但不在我的屏幕中
上次,我想我的网站:http://alexchen.co.nr/在一个朋友的笔记本电脑和我的网页和元素(我认为是#lang)迁出来的地方(我认为这只是发生在Chrome) 。
在我的电脑,一切都很好(火狐,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;
}
(继续。 ..)
正常显示:
异常显示:
我想,我在朋友的笔记本电脑的水平宽度,填充或某些元素的保证金被复制或东西。
我把#lang里面的文字缩小了一点,但是不知道问题是否还存在。
我的网页:http://alexchen.co.nr/在当前屏幕分辨率(IE,Firefox和Chrome)中正确显示?
如果不是我该如何解决它?是什么导致了这个问题?