Web-kit, Css Clip forcing scrollbar

Question

У меня есть большое изображение спрайта со ссылкой вокруг него, ссылка имеет свойство parent и изображение - свойство child.

Я использую инструмент css clip, чтобы вытащить конкретный фрагмент изображения. Тем не менее, в моем хроме браузере хотя я позиционирования мой дочерний элемент абсолютного и придавая ему переполнения из скрытого это вызывает браузера иметь вертикальные/горизонтальные полосы прокрутки.

.parent{ 
    margin-top: 10px; 
    text-decoration: none; 
    display: block; 

} 
.child { 
    border: 0; 
    position: absolute; 
    margin-top: -154px; 
    clip: rect(152px, 296px, 234px, 0px); 
    float: left; 
    overflow: hidden; 
} 

Использование: <a href="/" class="parent"> <img src="largeImage.png" class="child" /> </a>

отлично работает в Firefox и Internet Explorer 8.

Answer 1

Свойство overflow должен быть установлен в hidden на родительский элемент для того, чтобы скрыть перелива содержание части его дочерние элементы.

(в стороне: overflow влияет на блочные элементы контейнера, я не уверен, что если что-нибудь, что он должен делать на других элементах Смотрите здесь для подробностей: http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping.)

Вашего CSS, обновление:

.parent{ 
    margin-top: 10px; 
    text-decoration: none; 
    display: block; 
    overflow: hidden; 
} 

.child { 
    border: 0; 
    position: absolute; 
    margin-top: -154px; 
    clip: rect(152px, 296px, 234px, 0px); 
    float: left; 
}