换行符在 IE 和 Chrome 中呈现不同答案

【问题标题】：Linebreaks rendering differently in IE and Chrome换行符在 IE 和 Chrome 中呈现不同
【发布时间】：2011-08-22 21:27:35
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： html css internet-explorer google-chrome

【解决方案1】：

使用CSS reset。

浏览器（通常是用户代理）在 HTML 元素上应用预定义的样式。要取消这些预定义样式，鼓励设计人员和开发人员使用重置。

【讨论】：

【解决方案2】：

你的问题是什么？我一眼看到的唯一区别是下拉列表的宽度不同。尝试通过 css 在 select 元素上设置固定宽度。

【讨论】：