При зуме в Chrome появляются лишние пиксели

zodcyi · December 14, 2012

Доброго времени суток! Есть следующий код html:


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" href="css/style.css" />
	<!--[if lt IE 9]>
 	<script>
  		var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(',');
  		for (var i = 0; i < e.length; i++) {
    		document.createElement(e[i]);
  		}
 	</script>
	<![endif]-->
	<script>
		function hide_input_value(iv) {
			if (iv=="Search website") {
				document.getElementById('field_search').value="";
			}
		}
		function show_input_value(iv) {
			if (iv=="") {
				document.getElementById('field_search').value="Search website";
			}
		}
	</script>
</head>

<body>
	<header>
		<div id="services_wrapper">
			<div id="services">
				<ul id="menu_services">
					<li><a href="#">Account Sign In</a></li>
					<li><a href="#">Register</a></li>
					<li><a href="#">Buyers Guide</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
				<div id="switch_lang">
					<a href="#" id="usa_flag"></a>
					<a href="#" id="canada_flag"></a>
				</div>
				<a href="#" id="live_help">Live Help</a>
				<a href="#" id="phone_number">123.456.7890</a>
			</div><!--end of services-->
		</div><!--end of services_wrapper-->
		<div id="main_line_wrapper">
			<div id="main_line_bg">
				<div id="main_line">
					<div id="custom">
						<div>0 items in your bag</div>
						<a href="#">Check Out</a>
					</div><!--end of custom-->
					<div id="site_name">
						<img src="img/logo_part1.jpg" alt="logo_1" />
						<img src="img/logo_part2.jpg" alt="logo_2" />
					</div><!--end of site_name-->
					<form>
						<input type="search" name="search" value="Search website" id="field_search" onfocus="hide_input_value(this.value)" onblur="show_input_value(this.value)" /><input type="submit" value="" />
					</form>
				</div><!--end of main_line-->
			</div><!--end of main_line_bg-->
		</div><!--end of main_line_wrapper-->
	</header>
	<div id="nav_wrapper">
		<nav>
			<span>home</span>
			<a href="#">latest arrivals</a>
			<a href="#">men's</a>
			<a href="#">women's</a>
			<a href="#">kids</a>
			<a href="#">brands</a>
			<a href="#">sale</a>
			<a href="#">gift cards</a>
			<a href="#" id="last_nav_item">freebies</a>
		</nav>
	</div><!--end of nav_wrapper-->
</body>
</html>

Лист стилей:


@font-face {
    font-family: 'arial_narrowbold';
    src: url('../fonts/arial_narr_bold/arialnb-webfont.eot');
    src: url('../fonts/arial_narr_bold/arialnb-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/arial_narr_bold/arialnb-webfont.woff') format('woff'),
         url('../fonts/arial_narr_bold/arialnb-webfont.ttf') format('truetype'),
         url('../fonts/arial_narr_bold/arialnb-webfont.svg#arial_narrowbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*GENERAL*/
html, body {
	margin: 0px;
	padding: 0px;
	border: 0px;
}

#wrapper {
	width: 960px;
	margin: 0px auto;
}

.clear {
	clear: both;
}

img {
	border: 0px;
}

input[type="search"]:focus {
	outline: none;
}

/*HEADER*/
#services_wrapper {
	width: 100%;
	height: 30px;
	background: repeat-x url(../img/services_bg.gif);
}

#services {
	margin: 0px auto;
	width: 960px;
	height: 30px;
	background: repeat-x url(../img/services_bg.gif);
}

#menu_services {
	float:left;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	color: #c0c0c0;
	font: 13px Arial, sans-serif;
	line-height: 30px;
}

#menu_services li {
	float: left;
	margin-left: 13px;
	padding-left: 16px;
	background: url(../img/services_point_bg.gif) no-repeat;
}

#menu_services li:first-child {
	margin-left: 0px;
	padding-left: 0px;
	background: none;
}

#menu_services li a {
	color: #c0c0c0;
	text-decoration: none;
}

#menu_services li a:hover {
	text-decoration: underline;
}

#switch_lang {
	float: right;
	width: 53px;
	height: 11px;
	margin: 9px 0px 10px 31px;
}

#switch_lang a {
	display: block;
	width: 20px;
	height: 11px;
	float: right;
}

#usa_flag {
	background: url(../img/usa_flag.gif) no-repeat;
	margin-left: 13px;
}

#canada_flag {
	background: url(../img/canada_flag.gif) no-repeat;
}

#live_help {
	width: 60px;
	height: 18px;
	margin: 5px 0px 3px 36px;
	padding: 4px 0px 0px 38px;
	background: url(../img/cloud_help.png) no-repeat;
}

#live_help:hover, #phone_number:hover {
	text-decoration: underline;
}

#live_help, #phone_number {
	float: right;
	display: block;
	font: 13px Arial, sans-serif;
	line-height: 10px;
	color: #fff;
	text-decoration: none;
}

#phone_number {
	width: 83px;
	height: 16px;
	padding: 6px 0px 0px 27px;
	margin: 3px 0px 5px;
	background: url(../img/handset.png) no-repeat;
}

#main_line_wrapper {
	width: 100%;
	height: 100px;
	background: url(../img/main_line_bg.gif) repeat-x;
}

#main_line {
	width: 960px;
	height: 100px;
	margin: 0px auto;
	background: url(../img/main_line_bg2.png) no-repeat,
					url(../img/main_line_bg.gif) repeat-x;
}

#custom, #site_name {
	width: 320px;
	height: 100px;
	float: left;
}

#custom {
	background: url(../img/bag.png) 6px 7px no-repeat;
}

#custom div {
	margin: 28px 0px 12px 85px;
	font: 20px Arial, sans-serif;
	color: #fff;
}

#custom a {
	display: block;
	width: 114px;
	height: 17px;
	margin-left: 104px;
	padding-top: 6px;
	border-radius: 10px;
	background: url(../img/check_button.png) no-repeat;
	font: bold 15px/11px Arial,sans-serif;
	text-align: center;
	text-decoration: none;
	color: #ffc200;
}

#site_name img {
	display: block;
}

#site_name img:first-child {
	margin: 5px 0px 0px 48px;
}

#site_name img:first-child + img {
	margin-left: 81px;
}

#main_line > form {
	width: 292px;
	height: 31px;
	float: left;
	padding: 35px 0px 34px 28px;
}

#main_line input[type="search"], #main_line input[type="submit"] {
	height: 31px;
	border: 0px;
	padding: 0px;
	vertical-align: bottom;
}

#main_line input[type="search"] {
	width: 230px;
	padding-left: 20px;
	border-radius: 10px 0px 0px 10px;
	background: url(../img/search_input_bg.png) no-repeat;
	font: 13px Arial, sans-serif;
	color: #3a3a3a;
	-webkit-appearance: none;
}

#main_line input[type="submit"] {
	width: 42px;
	border-radius: 0px 10px 10px 0px;
	background: url(../img/go_button.gif) no-repeat;
	cursor: pointer;
}

/*NAV*/
#nav_wrapper {
	width: 100%;
	height: 43px;
	background: url(../img/nav_bg.png) repeat-x;
}

nav {
	width: 920px;
	height: 36px;
	padding: 7px 20px 0px;
	margin: 0px auto;
	font-size: 0px;
	line-height: 0px;
}

nav a, nav span {
	display: block;
	width: 90px;
	height: 28px;
	margin-right: 10px;
	float: left;
	text-transform: uppercase;
	font: bold 16px arial_narrowbold, sans-serif;
	text-align: center;
	white-space: nowrap;
	color: #fff;
	border-radius: 3px;
}

nav a {
	text-decoration: none;
}

nav span {
	background: url(../img/nav_item_bg.png) repeat-x;
}

nav span + a {
	width: 125px;
}

#last_nav_item {
	width: 85px;
	margin-right: 0px;
}

nav a:hover {
	background: url(../img/nav_item_bg.png) repeat-x;
}

Проблема - при изменении масштаба страницы в Chrome появляются дополнительные полоски пикселей. Привожу скрин(полоски указаны двумя стрелками слева), масштаб страницы в Chrome уменьшен до 90%.

Открываю Developer Tools в Chrome и вижу следующее:

Для дива #nav_wrapper в стилях определена высота в 43 пикселя. Получается, что при зуме Chrome меняет высоту блока.

При дальнейшем уменьшении/увеличении эти полоски пикселей начинают то пропадать, то появляться снова. С такой проблемой в Chrome встречаюсь уже не первый раз. Подскажите, пожалуйста, можно ли это исправить. Вот ссылка на страницу.

Yazon_Nile · December 17, 2012

Зачем это исправлять?

zodcyi · December 18, 2012

On 12/17/2012 at 6:54 PM, Yazon_Nile said:
Зачем это исправлять?

Так если пользователь масштабирует страницу, у него на экране появляются эти лишние пиксели. Получается, что сверстанные блоки съезжают. Да и внешний вид веб-страницы портится.

gibigate · December 19, 2012

все сайты портятся при зуме, обьясните это заказчику

Vin · December 19, 2012

Можно поиграться с отрицательными margin, фоновым цветом, позиционированием, чтобы блоки были как шкура у броненосца, тогда зазоров при масштабировании не будет. Но некоторое искажение всё равно будет, от этого не денешься.

zodcyi · December 19, 2012

Ясно, всем спасибо за помощь!

Sign In

При зуме в Chrome появляются лишние пиксели

Question

zodcyi

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Yazon_Nile

Link to comment

Share on other sites

zodcyi

Link to comment

Share on other sites

gibigate

Link to comment

Share on other sites

Vin

Link to comment

Share on other sites

zodcyi

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information