Часто возникает множество проблем несовместимости между IE и FF в макете веб-страницы CSS. Вот некоторые распространенные возможности и их решения.
1. Используйте !important, чтобы устранить различия в макете между IE и Mozilla. !important — это синтаксис, определенный в CSS1. Его функция — повысить приоритет применения определенных правил стиля. Наиболее важным моментом является то, что IE никогда не поддерживал этот синтаксис, но другие браузеры поддерживают. Следовательно, мы можем использовать это для определения различных стилей для IE и других браузеров. Например, мы определяем такой стиль:
Пример исходного кода
[www.downcodes.com] .colortest{
граница: 20pxsolid#60A179!важно;
граница: 20pxsolid#00F;
отступ: 30 пикселей;
ширина: 300 пикселей;
}
При просмотре в Mozilla он может понять приоритет !important, поэтому отображается цвет #60A179; при просмотре в IE он не может понять приоритет !important, поэтому отображается цвет #00F.
2. Решите проблему, связанную с тем, что стиль наведения не отображается после доступа к гиперссылке. Измените порядок свойств CSS. Стандарт порядка должен быть следующим:
a:ссылка—a:посещено—a:hover—a:активно
3. Как отображать контент в Li эллипсами после превышения длины Пример исходного кода
[www.downcodes.com] <meta content="text/html; charset=gb2312" http-equiv="Content-Type" />
<style type="text/css">
<!--
ли {
ширина: 200 пикселей;
пробел:nowrap;
переполнение текста: многоточие;
-o-text-overflow:многоточие;
переполнение: скрыто;}
--></стиль>
<ул>
<li><a href="#">Веб-дизайн CSS. Мне нравится веб-стандартизация CSS — www.52CSS.com</a></li>
<li><a href="#">Часто задаваемые вопросы по веб-стандартам – www.downcodes.com</a></li>
</ul>
Margin:3px — означает, что все стороны равны 3 пикселям;
Margin:3px 5px — означает, что значение верха и низа равно 3 пикселя, а значение правого и левого — 5 пикселей.
Margin:3px 5px 7px — — указывает, что значение верхнего значения равно 3, значение правого и левого — 5, а значение нижнего — 7.
маржа: 3px 5px 7px 5px — четыре значения обозначают верх, правый, нижний, левый верхний, правый, нижний и левый;
5. Решить проблему, что IE не может корректно отображать прозрачный PNG - добавить код в шапку Пример исходного кода
[www.downcodes.com] <script Language="JavaScript">
функция корректногоPNG()
{
for(var i=0; i<document.images.length; i++)
{
вар img = document.images[i]
вар imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "'" : ""
var imgTitle = (img.title) ? "title='" + img.title + "'" : "title='" + img.alt + "'"
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "курсор: рука; + imgStyle"
var strNewHTML = "<span" + imgID + imgClass + imgTitle
+ " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "фильтр: progid: DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src='" + img.src + "', sizingMethod='scale');"></span>"
img.outerHTML = strNewHTML
я = я-1
}
}
}
window.attachEvent("onload", CorrectPNG);
</скрипт>
Использовать (отступ: 0; поле: 0; стиль списка: внутри;)
Или (padding:0; Margin:0; list-style:none;) для достижения совместимости.
7. Решение проблемы разницы в 2 пикселя при интерпретации модели BOX в Firefox и IE. Пример исходного кода
[www.downcodes.com] div {
поле: 30 пикселей! важно;
поле: 28 пикселей;
}
Обратите внимание, что порядок этих двух полей не должен меняться на противоположный. Согласно вышеупомянутому IE не поддерживает !important, поэтому в IE он фактически интерпретируется следующим образом:
Пример исходного кода
[www.downcodes.com] div {
маринг: 30 пикселей;
поле: 28 пикселей
}
Если есть повторяющиеся определения, то будет выполнено последнее, поэтому нельзя просто написатьmargin:XXpx!important;
8. Эффект маржи по умолчанию Содержимое div по умолчанию центрируется в IE и по левому краю в FF. Чтобы центрировать содержимое ff, нужно добавить код Margin:auto;
