CSS: помогите расположить вырезанное изображение в Chrome / SafariIE и FireFox выглядят хорошо - PullRequest
Новая
       13

CSS: помогите расположить вырезанное изображение в Chrome / SafariIE и FireFox выглядят хорошо

0 голосов
/ 24 февраля 2011

Обрезание изображения с помощью CSS и все выглядит отлично с FireFox и IE7 +, но Chrome и Safari не очень хорошо воспринимают position:absolute. Вместо того, чтобы оставаться «относительно» родительских контейнеров, он фактически использует абсолютные координаты позиционирования.

Я пытался складывать контейнеры и размещать их по-разному, но мне не повезло.

К сожалению, я не могу привести ни одного примера напрямую.

Вот HTML: 

<div class="grayBkgd marginTop10Px grid_3 grayVideoContainer alpha">
    <a href="?ytID" class="noUnderlineHover curser-pointer">
        <div class="clip">
            <img src="an image" alt="" />
        </div><br />
        <div class="videoTextInfo">
            <p class="videoTitle">Optical Windows Overview
            </p>
        </div>
        <p class="grayText" style="float:right">0:37 mins</p>
    </a>
</div>

CSS: 

<style type="text/css">
        .grayVideoContainer{
            text-align:center;
            padding:3px 0 5px 0
        }
        .clip img {
            position:absolute;
            margin-left:-58px;
            clip:rect(12px 120px 79px 0)
        }
        .videoTextInfo {
            min-height:60px;
            padding:70px 5px 0 5px;
            color:#000
        }
        .grayText {
            float:right;
            margin-top:-10px;
            padding:0 5px 0 0   
        }
</style>

Есть идеи?

Я попытался найти плагины JQuery, чтобы обрезать изображение и посмотреть, будет ли мне легче позиционировать элементы, но мне не очень повезло найти какие-либо многообещающие плагины.

Ответы [ 2 ]

1 голос
/ 25 февраля 2011

Родительские контейнеры расположены вообще?Если нет, попробуйте добавить position: relative; к родительскому элементу ребенка, который position: absolute;.Относительное позиционирование не изменит позицию родителя в потоке вашего сайта, но позволит вам иметь абсолютно позиционированных детей.

1 голос
/ 25 февраля 2011

Абсолютно позиционированное положение элемента должно быть указано с помощью top, left, right и / или bottom.

См .: http://www.w3schools.com/css/pr_class_position.asp

margin-left на .clip img Я мог бы ожидать, что он не будет работать.

...