Background-image-position остается сверху, а не снизу в IE6 - PullRequest
Новая
       36

Background-image-position остается сверху, а не снизу в IE6

0 голосов
/ 28 июня 2011

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

По праву я должен иметь возможность использовать 4 элемента (div) и одно изображение.Я могу заставить это работать почти в любом браузере - за исключением IE6.

Я изменил код из http://www.schillmania.com/projects/dialog2/basic.html, чтобы у меня была следующая разметка и css; 

<div class="boxtl boxcontent">
    <div class="boxtr boxcontentside">tr</div>
        <p>This is the top half of the box</p>
        <p> content! </p>
        <p> content! </p>
</div>
<div class="boxbl boxcontent2">
    <div class="boxbr boxcontentside">br</div>
        <p>This is the bottom half of the box</p>
        <p> content! </p>
        <p> content! </p>
</div>


.boxtl, .boxtr, .boxbl, .boxbr {position:relative; zoom:1; background: url(../revised-images/testbox2.png) no-repeat 0 0; _background: url(../revised-images/testbox2ie.png) no-repeat 0 0; height:auto;}
.boxtl {margin-right:20px; }
.boxtr {margin-right:-20px; width:20px; height:20px; position:absolute; left:100%; top:0;  background-position: 100% 0; }
.boxbl {margin-right:20px; background-position: 0 100%;}
.boxbr {margin-right:-20px; width:20px; position:absolute; left:100%; top:0; background-position: 100% 100%;}
.boxcontent {padding:20px 0 1px 20px; position:relative; zoom:1; _overflow-y:hidden; width:auto;}
.boxcontentside {height:100%; _height:2000px;}

Я использовал большое изображение с одной коробкой (2000 / x H / W).Идея этого метода заключается в том, что я могу использовать альфа-прозрачность (углы, тени и т. Д.), Без наложений и т. Д.

.

Проблема в IE6;он отказывается делать что-либо похожее на вертикальное расположение фонового изображения.Я даже пытался изменить фоновое положение верхних 2-х div (.tl и .tr) до 50% от верха, но в IE6 оно остается равным 0.

Я пытался использовать full /свойства фона длинной руки (background-image / repeat background / background-position), и я попробовал x / y версию (background-position-x / background-position-y) и т. д.

Кажется, еслиЯ использую свойства _height: или _overflow-y: для того, чтобы IE растягивал необходимую высоту, он наносит вред своей способности вертикально позиционировать изображение.

Как я могу это сделать?

1 Ответ

1 голос
/ 01 июля 2011

Как упомянуто @Dan в комментариях, вам действительно не следует больше использовать такую ​​добрую технику изображения углов для закругленных углов.

Для этого следует использовать свойство CSS border-radius.

IE6-8 не поддерживает border-radius, но вы можете использовать скрипт CSS3Pie , чтобы добавить поддержку этого свойства в эти более старые версии IE.

Теперь вам не нужна вся эта дополнительная разметка, или все эти ненужные классы, или весь этот волосатый CSS.

Прелесть CSS3Pie в том, что он работает только в IE. Во всех других браузерах вы будете использовать чистый CSS, и они будут игнорировать скрипт CSS3Pie. В IE, да, это решение javascript, но оно легкое (обычно легче, чем загрузка нескольких файлов изображений для углов), и если оно не запускается, запасной вариант - это просто квадратные углы; не самая худшая вещь в мире.

Также добавлена ​​поддержка IE для ряда других полезных функций CSS3.

Если вес загрузки CSS3Pie слишком велик для вас (это 33 КБ), есть несколько других похожих проектов, которые делают то же самое, но с меньшим количеством функций. До появления CSS3Pie я обычно рекомендовал один из HTMLRemix . Это всего лишь около 5 тысяч, но не так хорошо.

...