IE中按鈕元素的邊距太大，在Firefox中看起來很完美

我第一次嘗試在登錄表單中的圓角。只是現在做佈局，但有一些IE7麻煩。儘量避免使用條件語句，但儘管我可以在Firefox 3.5中完美顯示它，但IE看起來會在登錄按鈕的左側和右側創建更大的頁邊空白。這可能是因爲我沒有把這個最好的方式組織起來，所以從社區中尋找一點點的洞察力。我的大部分問題都是在使用所示方法嘗試繞角進行之後開始的。我的目標是IE6/7兼容性。IE中按鈕元素的邊距太大，在Firefox中看起來很完美

<div id="credentials"> 
    <div id="credsheader"><div id="tr"> </div></div> 
    <input type="text" class="blurred" id="username" value="USERNAME" /> 
    <input type="password" id="password" class="blurred" value="PASSWORD" /> 
    <button type="submit" id="login"><img src="./images/login.png" alt="Submit" /></button> 
    <div id="credsfooter"><div id="bl"> </div></div> 
</div> 

div#credentials{ 
    position: absolute; 
    right: 10px; 
    top: 10px; 
    background-color: #666; 
    padding: 0px 5px; 
} 

div#tr{ 
    float: right; 
    background: url('../images/tr.png'); 
    background-repeat: no-repeat; 
    cursor: default; 
} 

div#bl{ 
    float: left; 
    background: url('../images/bl.png'); 
    background-repeat: no-repeat; 
    cursor: default; 
} 

#credsfooter{ 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    height: 6px; 
} 

#credsheader{ 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    height: 6px; 
} 

#username{ 
    font-family: 'Lucida Sans', Helvetica, Arial, sans-serif; 
    font-size: 8pt; 
    padding: 3px; 
    margin: 8px 3px; 
    vertical-align: middle; 
} 

#password{ 
    font-size: 8pt; 
    padding: 3px 3px 4px 3px; 
    margin: 8px 17px 8px 3px; 
    vertical-align: middle; 
} 

input.blurred{ 
    color: #AAA; 
} 

input.focused{ 
    color: #000; 
} 

#login{ 
    background: transparent; 
    border: 0px; 
    padding: 4px 0px 2px 0px; 
    margin: 0px -12px; 
    cursor: pointer; 
    vertical-align: middle; 
}

來源

2009-09-02 Christopher Garcia

請注意，IE具有嚴重的功能（不格式化）與「按鈕」元素的錯誤。像發送按鈕的值是否被按下的東西，所以你的表單處理不能告訴用戶做了什麼。這對你的情況可能沒有什麼不同（如果你只有一個提交按鈕，那麼表單提交的信息就足夠了），但總的來說，最好堅持輸入type =「submit」。 – Martha 2009-09-10 14:49:20

獲得可接受的利潤率，但仍不完美的跨瀏覽器。只是花時間操縱邊界大小的像素，直到它看起來不可怕。

來源

2009-09-24 17:48:19

不確定是否是這種情況，但它可能是'IE Double Margin Bug'。

從記憶中，我認爲可能值得嘗試在您的浮動元素中添加display: inline;？

祝你好運！

來源

2009-09-02 21:26:20

哇，令人驚訝的是，這並沒有奏效，但它似乎應該。它看起來好像在IE7中的保證金翻了一番。不過，真的很高興知道。 – 2009-09-02 21:32:28

很好 - 這值得一試！ CSS並不是我的東西，但我認爲我會提及它，以防萬一它是你的快速勝利！祝你好運！ – 2009-09-02 21:38:20

絕對肯定我會在稍後需要，但。 – 2009-09-02 21:46:39

這很難回答，沒有查看HTML的行動（例如圖像）。你能在某個地方設置一個示例頁面嗎？

理論上，它可能是您的按鈕元素沒有hasLayout的情況。您可以將position: relative CSS樣式添加到按鈕元素並查看它是否有效。或者，它可能是一個負橫向邊緣（IE有時不喜歡）的情況。

來源

2009-09-02 21:54:42

好吧，所以我發現了很多問題，這些問題是由於瀏覽器不一致造成的，這些問題導致了很多問題，所以我基本上重新開始了。我討厭形式因爲不一致，所以這對我來說是一種學習體驗。我能夠真正整合CSS，因爲它有很多用於補償奇怪的填充和邊距。最主要的是我使用了一個按鈕的輸入元素而不是一個按鈕，因爲它在瀏覽器中更加一致。我還添加了一個表單標籤來解決那裏的任何問題。請注意，表格中的<p>是故意的。我還添加了一個reset.css文件，它有很大的不同，因爲它將所有元素重置爲與所有瀏覽器一致的狀態。

下面是重新編寫代碼：

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
     <title>Buttons Suck in IE7!</title> 
     <link rel="stylesheet" href="reset.css" type="text/css" /> 
     <style type="text/css"> 
      #credentials{ 
       position: absolute; 
       right: 10px; 
       top: 10px; 
       background-color: #666666; 
       padding: 10px; 
       -moz-border-radius: 5px; 
      } 

      input.text-input{ 
       font-family: 'Lucida Sans', Helvetica, Arial, sans-serif; 
       border: 1px solid black; 
       vertical-align: middle; 
       height: 20px; 
       width: 140px; 
       color: #AAAAAA; 
      } 

      input.text-input:focus{ 
       color: #000000; 
      } 

      input#login{ 
       background: transparent; 
       border: 0px; 
       height: 20px; 
       cursor: pointer; 
       vertical-align: middle; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="credentials"> 
      <form action="http://www.site.com/login.php"> 
       <p> 
        <input type="text" class="blurred text-input" id="username" value="USERNAME" /> 
        <input type="password" class="blurred text-input" id="password" value="PASSWORD" /> 
        <input id="login" type="image" 
          src="http://www.axialis.com/objects/users-home.jpg" 
          name="submit" value="Button Text" /> 
       </p> 
      </form> 
     </div> 
    </body> 
</html>

請注意，我用的按鈕圖像是一些隨機圖像我在谷歌找到了！你可能還注意到我用圓角的-moz-border-radius: 5px;。這是爲了簡化。你可以做的就是在Firefox中獲取憑證框的屏幕截圖，然後在你最喜歡的圖像編輯器中裁剪出框。接下來，您將使用某種油漆刷工具填充灰色輸入。現在你會有一個空白的灰色框，形狀和大小相同。現在，您只需將其設置爲憑據框的背景圖像即可。這是一個更簡單的方法，然後一次做每個角落！這樣做後，不要忘記擺脫-moz-border-radius: 5px;。

哦，我忘了這裏之前reset.css：每一頁上

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
     margin:0; 
     padding:0; 
} 
table { 
     border-collapse:collapse; 
     border-spacing:0; 
} 
fieldset,img { 
     border:0; 
} 
address,caption,cite,code,dfn,em,strong,th,var { 
     font-style:normal; 
     font-weight:normal; 
} 
ol,ul { 
     list-style:none; 
} 
caption,th { 
     text-align:left; 
} 
h1,h2,h3,h4,h5,h6 { 
     font-size:100%; 
     font-weight:normal; 
} 
q:before,q:after { 
     content:''; 
} 
abbr,acronym { border:0; 
}

包含此reset.css它的救星相信我。哦，還有最後一張紙條。 input.text-input:focus{}可能不會在IE6或7中工作，它只會在標籤上工作。但不要擔心，因爲我認爲IE6在這一點上的使用壽命有限。

我希望這有幫助...祝你好運！

更新：我在IE 5.5-8上測試了它，它看起來每個都是一樣的，唯一的問題是：焦點只能在IE8中用於輸入標籤。

來源

2009-09-03 10:46:29

在IE7中一個<button>元素，你需要設置溢出可見：

button { 
*overflow: visible; 
}

這裏找到：http://refresh-sf.com/blog/2009/06/button-padding-ie7-bu/

我個人喜歡用「*黑客」的目標IE7唯一的 - 雖然可能不必要在這種情況下。

來源

2011-10-10 20:03:08 robocat

IE中按鈕元素的邊距太大，在Firefox中看起來很完美

回答

相關問題