Разрывы строк отображаются по-разному в IE и Chrome - PullRequest
Новая
       12

Разрывы строк отображаются по-разному в IE и Chrome

0 голосов
/ 22 августа 2011

Я использую систему сетки 960 CSS. Я делал очень быстрый макет веб-сайта и заметил, что мои разрывы строк отображаются в Chrome совершенно иначе, чем в IE8.

Следующая ссылка содержит скриншоты обоих браузеров. Первое изображение - IE8, а второе - Chrome: http://imgur.com/YLgcsl&kIeTn

Что я могу сделать, чтобы избавить свой код от несоответствий

Вот код, который я использую. 

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>The 1Kb Grid Demo – 16 columns, 60 pixels each, with 20 pixel gutter</title>
    <link href="grid.css" type="text/css" rel="stylesheet" media="screen"/>

    <style type="text/css" media="screen">

        body { margin: 20px 0 0 0; }
        p {
            font:60px/100px Helvetica;
            color: #000;
            text-align: center;
            border: 1px solid #000;
            margin: 0 0 20px 0;
        }

        label {
            float:left;
        }


    </style>

</head>
<body>

<div class="row">
    <div class="column grid_16"><p>16</p></div>
</div>

<div class="row">
    <div class="column grid_8">

    <label>First name: </label><br /> <input type="text" name="firstname" /><br />
    <label>Last name: </label><br />  <input type="text" name="lastname" /><br />
    <label>ID: </label><br />    <input type="text" name="employnum"/>
    <br />


    <label>Observer</label><br />
    <select style="width:150px" name="observer">
    <option value="TEST"> TEST </option>
        <option value="TEST"> TEST </option>
        <option value="TEST"> TEST </option>

    </select>

    <label>Observed</label>
    <form action="">
    <select style="width:150px" name="observed">
    <option value="TEST"> TEST </option>
    <option value="TEST"> TEST </option>
    <option value="other">Other</option>
    </select><br />


    <label>Operation Code</label><br />
    <select  style="width:150px"  name="opcode">
                        <option value="TEST"> TEST </option>
            <option value="TEST"> TEST </option>
            <option value="TEST"> TEST </option>
                        <option value="TEST"> TEST </option>




                    </select>

                    <label>Center</label><br /><br />
                    <select style="width:150px" name="cost">

                        <option value="Zone 1"> Zone 1 </option>
                        <option value="Zone 2"> Zone 2 </option>
                        <option value="Zone 3"> Zone 3 </option>
                    </select>
                    </form>
        <div class="row">
            <div class="column grid_4"><p>4</p></div>
            <div class="column grid_4"><p>4</p></div>
        </div>
    </div>
    <div class="column grid_8"><p style="line-height: 222px;">8</p></div>
</div>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 22 августа 2011

Какой у вас вопрос? Единственное отличие, которое я вижу на первый взгляд, состоит в том, что ширина выпадающих списков различна. Попробуйте установить фиксированную ширину элементов select с помощью css.

0 голосов
/ 22 августа 2011

Использование Сброс CSS .

Браузеры (пользовательские агенты в целом) применяют предопределенный стиль к элементам HTML.Чтобы отменить эти предопределенные стили, дизайнерам и разработчикам рекомендуется использовать перезагрузки.

...