Проблема высоты CSS.IE8 кажется правильным Firefox кажется неправильным.Любое исправление? - PullRequest
Новая
       7

Проблема высоты CSS.IE8 кажется правильным Firefox кажется неправильным.Любое исправление?

0 голосов
/ 31 марта 2010

Ниже приведена полная html-страница с описанием проблемы.

Высота myDiv должна составлять 22 пикселя (включая границу). Элемент 1 должен иметь интервал 1px между его границей и границей "myDivs". В IE8 это так.

В FF 3.6.2, хотя это 24px, и я не могу понять, почему. В конечном счете, моя цель - получить один и тот же CSS для создания одинакового результата в обоих браузерах.

Это сводит меня с ума! Любая помощь будет оценена :) 1007 * 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title></title>
        <style type="text/css">
            div.aclb {background:#EEF3FA; color:#666; cursor:text; padding:1px; overflow-y:auto; border:#BBC8D9 1px solid; }
            div.aclb:hover {border:#3399FF 1px solid;}
            div.aclb.focus {background:#FFF; border:#3399FF 1px solid;}
            div.aclb ul {padding:0; margin:0; list-style:none; display:table; vertical-align:middle; }
            div.aclb li {float:left; cursor:default; font-family:Arial; padding:0; margin:0;}
            div.aclb li.block {padding:0px 2px; height:16px; white-space:nowrap; border:solid 1px #BBD8FB; background:#f3f7fd; font-size:11px; line-height:16px;}
            div.aclb li.block:hover {border:solid 1px #5F8BD3; background:#E4ECF8; color:#000;}
            div.aclb li.input {}

            div.aclb input {margin:0; padding:0; height:18px; background:transparent; border:none; color:#666; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none;}
            div.aclb input:focus {margin:0; padding:0; height:18px; background:transparent; border:none; color:#22F; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none;}

            div.aclb a.d {cursor:pointer; display:block; color:#6B6B6B; width:13px; height:12px;float:right; margin:1px 0 1px 4px; border:solid 1px transparent; font-family:Verdana; font-size:11px; text-align:center;  line-height:10px;}
            div.aclb a.d:hover { border:solid 1px #7DA2CE; background:#F7FAFD; color:#AD0B0B;}
            div.aclb a.d:active {border:solid 1px #497CBB; background:#BAD8E8; color:#A90909;}
        </style>
    </head>
    <body>

    <div id="myDiv" style="width:250px" class="aclb">
        <ul>
            <li class="block">
                <a class="d">x</a><span>Item 1</span>
            </li>
            <li class="input">
                <input type="text" style="width:30px" maxlength="30"/>
            </li>
        </ul>
    </div>

    </body>

    </html>

Ответы [ 2 ]

2 голосов
/ 31 марта 2010

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

Установите div.aclb li.input, чтобы иметь высоту 18px или меньше. По крайней мере, для меня это исправлено в FF.

0 голосов
/ 31 марта 2010

Вы пробовали использовать CSS-условные выражения? http://www.quirksmode.org/css/condcom.html Я знаю, вы сказали, что хотите использовать один и тот же CSS для обоих, но это может решить проблему быстрее Просто сделайте один набор CSS для IE и один для всех остальных. Если это не сработает, дайте мне знать. Я буду копать глубже и посмотрю, смогу ли я найти универсальное решение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...