border-image: обходной путь для IE

Question

Есть ли обходной путь для IE, который позволяет мне использовать border-image? Я занимаюсь разработкой сайта, и он работает правильно в любом браузере, кроме IE. Мне нужно подражать этим барам

Я мог бы использовать ie-css3.htc , но border-radius работает только с четырьмя углами вместе (что здесь не применимо, потому что верхняя граница не округлена) и filter Свойство css (для градиента) вообще не работает с border-radius (оно заполняет весь элемент, игнорируя пределы радиуса границы). Если для этого нет обходного пути, как лучше всего это сделать?

Answer 1

Файлы .png не нужны.Просто используйте CSS3 pie: http://css3pie.com/

Полностью избавьтесь от проприетарного фильтра IE и используйте вместо него (хе, проприетарный) -pie-background:linear-gradient(values).

Работает гармонично с индивидуально закругленными углами: border-radius: 0 5px 5px 5px

В этом случае верхний левый угол не будет иметь граничного радиуса, а остальные углы (по часовой стрелке) будут по 5 пикселей каждый.

Затем используйте behavior:url(path_to/pie.htc); втот же стиль.

Помните также, что path_to относится к просматриваемому документу, а не к файлу CSS, который его вызывает.Не забудьте проверить, что если он не работает сразу же.

Я проверял это много раз, и он работает как брелок.

Дополнительная информация:

Если иногда ваш стиль появляется и исчезает, попробуйте дать вашему элементу position:relative и указанное z-index.Как работает CSS3 PIE, он работает с z-индексом и может заставить ваши стилизованные градиенты (и закругленные углы и т. Д.) Появляться под фоном, если не указано, особенно если вы используете отрицательные поля или что-то странное в этом роде.

Answer 2

Сделайте действительно широкое изображение этого красного градиента с надлежащими 4 угловыми вырезами, сохраните его как изображение (прозрачный PNG по углам, поскольку вы не поддерживаете IE6).

Для каждой из этих областей заголовка вы оберните это так:

<div class="outer"><div class="inner">ENQUETE</div></div>

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

.outer {  
    background: transparent url(redgradient.png) no-repeat 0px 0px;  
    margin: 0 10px 0 0;  
}  
.inner {  
    background: transparent url(redgradient.png) no-repeat 100% 0px;  
    position: relative;  
    left: 10px;  
}  

Answer 3

Единственное реальное решение может быть сделать ваши углы или боковые изображения. Все выглядит так, как будто все одинакового размера, просто имеет расширяемую ширину. так что это должно быть легко и просто кодировать без задержки для загрузки.

Вот почему я придерживаюсь концепции использования того, что доказано доступным. Это означает, что если ваш целевой рынок использует IE7 +, вы должны быть осторожны при проектировании и программировании, поэтому вы не столкнетесь с небольшими проблемами, подобными этой.

Все эти CSS3 и HTML5 замечательные вещи, но мы, как разработчики, все еще ограничены тем, что видят все. Если вы хотите, чтобы у всех пользователей было равномерное игровое поле, то вы можете положиться на новые методы кодирования, пока не сможете выполнять такие действия, как border-radius, по всем направлениям во всех браузерах.

С другой стороны, вы можете просто не заботиться о том, что видят пользователи IE; поэтому для людей, использующих другие браузеры, вы можете просто использовать другой стиль для улучшения браузера.

Answer 4

Хит точно такой же проблемы и дал IE <= 9 через условные комментарии откат.Однако это решение теперь не работает, поскольку последняя версия IE10 prev4 все еще не поддерживает border-image, а также не поддерживает условные комментарии IE.Вернуться к чертежной доске ... </p>

Работая над решением, мы действительно должны использовать: тестирование функций.

Использование Modernizr, который добавляет имена классов CSS3 в тег html и тестирование для border-imageв духе веб-стандартов) или no-border-image (предоставьте пользователям IE лучшее, что вы можете сделать, но не то же самое, что совместимые браузеры, и отобразите в IE видимую ссылку только на вашу страницу, которая говорит им, как получить лучший опыт:IE например).

Answer 5

Нет, но вещь ie-css3.htc может быть единственно возможной, если я об этом думаю. Или был другой сценарий JS, я думаю о том, что решил это? Не могу вспомнить.