Есть ли обходной путь дополнения IE7 без указания размеров? - PullRequest
1 голос
/ 27 апреля 2011

У меня есть <p> тег с 9px отступов вокруг. Хорошо смотрится в FF и IE8, но не в IE7. Он «сжимает» тег <p> вниз. Это становится очевидным для зрителя, поскольку тег <p> имеет полупрозрачный PNG, используемый для фона, и вы можете видеть, что он не касается правой стороны содержащего <div>, как это происходит в двух других браузерах. 1005 *

Не вдаваясь в «почему», я просто задаюсь вопросом: есть ли способ получить тег <p> с отступом 9px для заполнения доступного пространства в IE7 без указания ширины (пикселя или процента) )

Спасибо!

Пример HTML-кода:

<a href="#">
    <img class="off" src="image1.png" />
    <img class="on" src="image2.png" />
    <p>Some copy.</p>
</a>

Пример кода CSS:

a {
    position: absolute;
    top: 100px;
    left: 100px;
}

a img.on {
    visibility: hidden;
    position: absolute;
    top: -10px;
    left: -10px;
}

a:hover img.on, a:hover p {
    visibility: visible;
}

a p {
    position: absolute;
    visibility: hidden;
    bottom: 0px;
    left: 0px;
    padding: 8px;
    background: url(bg.png) repeat;
}

Ответы [ 2 ]

0 голосов
/ 28 апреля 2011

К сожалению, поскольку второе изображение больше первого, установка ширины <p> на 100% делает его слишком длинным.

Я создал решение в JQuery, которое решило проблему динамически.Он устанавливает ширину <p>, получая из него значение padding-top (определенное в CSS), умножая его на 2, а затем вычитая из ширины первого изображения (.off).Казалось бы, это более элегантный способ сделать это, поскольку вы можете обновить отступы в CSS без необходимости обновления кода JQuery, и вам не нужно помещать статическую информацию о ширине в файл CSS.Похоже, это работает во всех браузерах.

0 голосов
/ 28 апреля 2011

Ваш пример мне не очень помогает, так как не иллюстрирует проблему.Попробуйте установить ширину и высоту вашего p на 100%.Вы можете обнаружить, что это делает его немного слишком большим, и в этом случае вам нужно будет установить ширину и высоту для IE6 / 7 равными высоте и ширине прямого пикселя за вычетом значений отступов (x2 с обеих сторон).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...