Я не уверен, может ли разрешение экрана влиять на CSS. У меня разрешение экрана 1280 x 1024.
В прошлый раз я попробовал свой веб-сайт: http://alexchen.co.nr/ на ноутбуке друзей, и моя веб-страница и элемент (я думаю, #lang) переместились (не думаю, что это произошло только в Chrome). 1006 *
На моем компьютере все нормально (Firefox, Chrome, IE6, 7, 8 и т. Д.)
CSS (я также использую Сброс CSS Эрика Мейера ):
/* 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;
}
(продолжение ...)
Обычный дисплей:
альтернативный текст http://img202.imageshack.us/img202/9638/normale.png
Неправильный дисплей:
альтернативный текст http://img199.imageshack.us/img199/2846/notnormal.png
Я думаю, что в ноутбуке моего друга дублирована горизонтальная ширина, отступы или поля некоторых элементов или что-то в этом роде.
Я сделал текст внутри #lang немного меньше, но не уверен, что проблема все еще существует.
Правильно ли отображается моя веб-страница: http://alexchen.co.nr/ в текущем разрешении экрана (IE, Firefox и Chrome)?
Если нет, то как мне это исправить? что вызывает проблему?