HTML/CSS按鈕不能在IE中正確顯示

我在HTML表單中有四個按鈕。下面是HTML：HTML/CSS按鈕不能在IE中正確顯示

   <div class="fileinputs"> 
        <input type="file" class="file" name="uploadedfile" /> 
        <div class="fakefile"> 
          <img src="../assets/images/uf_btt.png" /> 
        </div> 
       </div> 
       <div class="fileinputs"> 
        <input type="reset" class="file" /> 
        <div class="fakefile"> 
          <img src="../assets/images/reset_btt.png" /> 
        </div> 
       </div> 
       <div class="fileinputs"> 
        <input type="button" class="file" onclick="window.print()" /> 
        <div class="fakefile"> 
          <img src="../assets/images/print_btt.png" /> 
        </div>      
       </div>

這裏是CSS：

input[type=submit] 
{ 
    width: 119px; 
    height: 47px; 
} 

input[type=button] 
{ 
    width: 119px; 
    height: 47px; 
} 

input[type=reset] 
{ 
    width: 119px; 
    height: 47px; 
} 

input[type=file] 
{ 
    width: 119px; 
    height: 47px; 
} 

div.fileinputs { 
    position: relative; 
    float: left; 
} 

div.fakefile { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
} 

input.file { 
    position: relative; 
    text-align: right; 
    -moz-opacity:0 ; 
    filter:alpha(opacity: 0); 
    opacity: 0; 
    z-index: 2; 
}

所有四個按鈕都顯示正常，除了IE，他們在那裏有點錯位所有的瀏覽器。在我看來，IE瀏覽器並不知道如何將圖片放在'文件'輸入類型之上，因此它的右邊有一個空格，它是透明的「瀏覽」按鈕。如果你在IE中打開頁面並嘗試使用這些按鈕，你會明白我的意思：eximi.dreamhosters.com/Hawaii/html/contact_email.php 有什麼想法嗎？

謝謝！

來源

2010-07-22 vlevsha

IE瀏覽器不理解像[type = button]這樣的css選擇器。

改爲使用類。

我知道，這是不幸的，煩人..它是IE瀏覽器。

來源

2010-07-23 04:38:41 Ben

老實說，如果所有按鈕都是相同的，那麼選擇器無論如何都是多餘的。只需執行一個輸入{...}就足夠了，而且開銷少。 – bpeterson76 2010-07-23 14:29:42

親愛的本，非常感謝！它的工作！親愛的bpeterson，這正是我所做的（我猜） - 我對所有按鈕使用相同的一組類。謝謝！ – vlevsha 2010-07-23 15:17:58

這是一個有點長鏡頭，但嘗試把

position: relative;

的風格

您的按鈕（即.submit，.PRINT，.reset段）。

我已經解決了這個問題，它解決了IE中一些神祕的CSS問題。我找到了一個引用，這是指IE瀏覽器的魔術：http://www.communitymx.com/content/article.cfm?cid=C37E0

來源

2010-07-22 22:49:46

謝謝！但它沒有奏效。儘管我更改了HTML，但我將其餘三個按鈕放入與「文件」按鈕相同的類中。它變得更好一點 - 全部四個按鈕現在都在IE中顯示，但有些錯位。在我看來，IE瀏覽器並不知道如何將圖片放在'文件'輸入類型之上，因此它的右邊有一個空格，它是透明的「瀏覽」按鈕。如果你在IE中打開頁面並嘗試使用按鈕，你會明白我的意思： http://eximi.dreamhosters.com/Hawaii/html/contact_email.php – vlevsha 2010-07-23 03:04:09

HTML/CSS按鈕不能在IE中正確顯示

回答

相關問題