Прозрачный фон png создает странный эффект в IE7 (но только в некоторых случаях) - PullRequest
1 голос
/ 13 сентября 2011

У меня небольшая проблема с очень странным побочным эффектом, который происходит со мной в режиме совместимости с IE / IE7.

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

Я считаю себя компетентным специалистом в области HTML и CSS, но не могу найти решение этой проблемы.

Веб-страница, о которой идет речь, http://www.freezeframedesign.com/blog. Это происходит только в IE7 и режиме совместимости с IE - вы увидите, что фон для каждой статьи выглядит так, как будто фоновое изображение выложено поверх самого себя, по сравнению с появление на всех других страницах сайта.

CSS для элемента:

.studioarticle{
    padding:20px;
    background:url(/siteimages/back_white.png);
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 7px -2px #111;
    box-shadow:0px 0px 4px #000;
}

(я знаю, что свойство box-shadow здесь не будет работать)

Это все довольно стандартные вещи. Если я использую инспектор разработчика IE и открепляю фоновое изображение, оно полностью исчезает, поэтому не похоже, что другой элемент каким-то образом получает фоновое изображение.

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

Я знаю, что в наши дни не так много людей используют IE7, но как веб-дизайнер я хочу убедиться, что мой сайт по-прежнему доступен для всех меньшинств.

Большое спасибо за вашу помощь!

Ответы [ 2 ]

1 голос
/ 13 сентября 2011

У вас есть запас -7px 0 0 в классе studiotitle. Возьми это, и это сработает.

Отрицательное число для полей или отступов - всегда большой красный флаг в моем опыте.

0 голосов
/ 13 сентября 2011

попробуйте написать:

background: transparent url(/siteimages/back_white.png) repeat 0 0;

, а также для IE7 можно попробовать увеличить: 1

...