Подтвердить что ты не робот

Позиция: абсолютная; Слева направо: -10000px; лучше, чем отображение: нет;?

Я видел, как люди устанавливали стиль элемента:

element{
    position:absolute;
    left:-10000px;
}

вместо настройки:

element{
    display:none;
}

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

Ответ 1

Элемент, чье свойство display none не может быть измерено. Такие свойства, как offsetWidth и offsetHeight, всегда возвращают 0 в этом случае.

С другой стороны, можно измерить элемент, видимый, но смещенный за пределы области документа. Итак, если вы хотите скрыть элемент, но все же сможете определить его ширину и высоту, первое решение - это путь.

Ответ 2

Я думаю, что это решение для устранения ошибки IE, где элемент, скрытый внутри другого элемента, который скрыт, отображается, а не скрыт.

Я бы использовал display: none, если у вас нет проблем с браузером или другой причиной, из-за которой вам не нужно.

Ответ 3

Это лучше для SEO и доступности, так как экраны будут читать текст с негативными смещениями. Кроме того, текстовый поиск в браузерах (Ctrl-F) работает одинаково.

Ответ 4

Если вы хотите настроить таргетинг на свою веб-страницу для тех, у кого есть программы для чтения с экрана или текстовые браузеры, лучше иметь дисплей: нет вместе с типом носителя, например, звуковой сигнал, шрифт Брайля, тиснение и tty, которые не интерпретируют изображения на всех, но вместо этого отображает альтернативный текст. Считыватели экрана и текстовые браузеры могут читать все, что в элементе с абсолютным позиционированием, установленным на 1000 пикселей влево.

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

@media handheld,print,projection,screen,tv
{
    #header h1
    {
        display: none;
    }
}

@media aural,braille,emboss,tty
{
    #header #m1,
    #menu li span,
    table thead th span,
    .submenu span
    {
        display: none;
    }
}

...

HTML:

...

    <div id="wrapper">
        <div id="header">
            <h1>Grayson Peddie Home Automation Interface</h1>
            <div id="m1">
                <img src="Images/MarqueeHeader/remotecontrol.jpg" alt=""
                    onmouseover="ShowHeaderToolTip('remotecontrol')"
                    onmouseout="HideHeaderToolTip('remotecontrol')" />
                <img src="Images/MarqueeHeader/doorsensor.jpg" alt=""
                    onmouseover="ShowHeaderToolTip('doorsensor')"
                    onmouseout="HideHeaderToolTip('doorsensor')" />
                <img src="Images/MarqueeHeader/lampmodule.jpg" alt=""
                    onmouseover="ShowHeaderToolTip('lampmodule')"
                    onmouseout="HideHeaderToolTip('lampmodule')" />
                <img src="Images/MarqueeHeader/floorlamp.jpg" alt=""
                    onmouseover="ShowHeaderToolTip('floorlamp')"
                    onmouseout="HideHeaderToolTip('floorlamp')" />
                <img src="Images/MarqueeHeader/Insteon.jpg" alt=""
                    onmouseover="ShowHeaderToolTip('insteon')"
                    onmouseout="HideHeaderToolTip('insteon')" />
                <img src="Images/MarqueeHeader/remotecontrol.jpg" alt=""
                    onmouseover="ShowHeaderToolTip('remotecontrol')"
                    onmouseout="HideHeaderToolTip('remotecontrol')" />
                <img src="Images/MarqueeHeader/doorsensor.jpg" alt=""
                    onmouseover="ShowHeaderToolTip('doorsensor')"
                    onmouseout="HideHeaderToolTip('doorsensor')" />
                <img src="Images/MarqueeHeader/lampmodule.jpg" alt=""
                    onmouseover="ShowHeaderToolTip('lampmodule')"
                    onmouseout="HideHeaderToolTip('lampmodule')" />
                <img src="Images/MarqueeHeader/floorlamp.jpg" alt=""
                    onmouseover="ShowHeaderToolTip('floorlamp')"
                    onmouseout="HideHeaderToolTip('floorlamp')" />
                <img src="Images/MarqueeHeader/Insteon.jpg" alt=""
                    onmouseover="ShowHeaderToolTip('insteon')"
                    onmouseout="HideHeaderToolTip('insteon')" />
                <img src="Images/MarqueeHeader/remotecontrol.jpg" alt=""
                    onmouseover="ShowHeaderToolTip('remotecontrol')"
                    onmouseout="HideHeaderToolTip('remotecontrol')" />
            </div>
            <ul id="menu">
                <li>
                    <span>Home</span>
                    <a href="javascript:SwitchContent('home')">Home</a>
                </li>
                <li>
                    <span>Timers</span>
                    <a href="javascript:SwitchContent('timers')">Timers</a>
                </li>
                <li>
                    <span>Admin</span>
                    <a href="javascript:SwitchContent('admin')">Admin</a>
                </li>
            </ul>
        </div>

...

Надеюсь, это поможет.

Тег span используется для создания тени с абсолютным позиционированием и z-index.