Question

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

Answer 1

使用CSS reset。

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

Answer 2

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

在IE和Chrome中，换行符的呈现方式不同

2 个答案: