換行符在IE和Chrome中的呈現方式有所不同

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 個解決方案

解決方案1
0 2011-08-22 13:23:34

解決方案2
0 2011-08-22 13:24:14

換行符在IE和Chrome中的呈現方式有所不同

問題描述

2 個解決方案

解決方案1 0 2011-08-22 13:23:34

解決方案2 0 2011-08-22 13:24:14

解決方案1
0 2011-08-22 13:23:34

解決方案2
0 2011-08-22 13:24:14