我在IE和Chrome上面臨着差異

我面臨着IE和Chrome中的一些佈局差異。我已經搜索了堆棧溢出高和低的解決方案，並嘗試了一些...我嘗試設置框大小初始...它沒有工作...之前嘗試設置它的文本框的高度，但仍然差異很大。我也嘗試將doctype更改爲strict。我遇到這個問題作爲我的項目的一部分。我在IE和Chrome上面臨着差異

問題：我有一個div標籤形式。在表單中有4行文本字段。我將IE和Chrome上的預覽放在一起進行預覽比較，並認識到導致高度差異的文本區域之間的間距。

代碼在我的html文件：

<div class="leftdetails"> 
    <form class="form2" name="form2" method="post" action=""> 
     <label for="fname">First Name: </label> 
     <input type="text" name="fname" id="fname" class="regfields"/> 
     <br /> 
     <label for="cdsid">CDSID: </label> 
     <input type="text" name="cdsid" id="cdsid" class="regfields"/> 
     <br /> 
     <label for="mail">Mail Drop: </label> 
     <input type="text" name="mail" id="mail" class="regfields"/> 
     <br /> 
    <label for="dateofbirth">D.O.B.: </label> 
    <input type="text" name="dateofbirth" id="dateofbirth" class="regfields"/> 
    <br /> 
    </form> 
    </div>

.leftdetails 
    { 
font-family:Myriad Pro; 
font-size:18px; 
float:left; 
width:50%; 
text-align:center; 
    } 

    .regfields 
    { 
width:200px; 
height:20px; 
vertical-align:bottom; 
    } 

    .form2 
    { 
text-align:right; 
margin-right:50px; 
    }

這不是在網上公佈我的CSS代碼（外部），但因此也沒有鏈接...但我會很高興提供截圖。這是一個很小的差異，但我只是想明白爲什麼。

來源

2012-03-28 Hubert

你真的不能「上傳」圖像SO。您可以使用圖像主機（例如[imgur]（http://imgur.com））來託管圖像，然後在帖子中使用''標籤鏈接到它。 – PenguinCoder 2012-03-28 01:13:15

@PenguinCoder我添加了屏幕截圖...謝謝 – Hubert 2012-03-28 01:20:01

看到一個實際的屏幕截圖將是有益的。您可能還想通過Firebug或類似工具跟蹤文本字段的渲染樣式。這可能只是瀏覽器之間不同的默認邊界/邊框/填充的情況。 – brezanac 2012-03-28 01:25:55

嘗試在regfields CSS類中將padding-top和padding-bottom設置爲0px。也許還有margin-top和margin-bottom

來源

2012-03-28 02:37:09 JScoobyCed

嘗試在CSS中使用條件IE語句來僅定位Internet Explorer瀏覽器。

如果你不知道如何做到這一點，例子可以發現here

來源

2012-03-28 02:48:32 tmwebdeveloper

我在IE和Chrome上面臨着差異

回答

相關問題