2010-04-23 75 views
0

我有這個問題的fieldsets ...看看我想在我的字段集上具有一些跨瀏覽器一致性,你知道我該怎麼做?

http://i.imgur.com/IRrXB.png

是有可能實現的目標,我想用CSS ???相信我,我試過了!你可以在img上看到,我只是希望傳奇的外觀在瀏覽器中保持一致,我希望它不再使用fieldset的寬度(比如Chrome和ie),而且不會少於Firefox(比如firefox) ,不要擔心圓角和其他問題,這是照顧。

繼承人我使用的核心。

CSS

<style type="text/css"> 
     fieldset {margin: 0 0 10px 0;padding: 0; border:1px solid silver; background-color: #f9f9f9; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px} 
     fieldset p{clear:both;margin:.3em 0;overflow:hidden;} 
     fieldset label{float:left;width:140px;display:block;text-align:right;padding-right:8px;margin-right: 2px;color: #4a4a4a;} 
     fieldset input, fieldset textarea {margin:0;border:1px solid #ddd;padding:3px 5px 3px 5px;} 
     fieldset legend { 
      background: #C6D1E8; 
      position:relative; 
      left: -1px; 
      margin: 0; 
      width: 100%; 
      padding: 0px 5px; 
      font-size: 1.11em; 
      font-weight: bold; 
      text-align:left; 
      border: 1px solid silver; 
      -webkit-border-top-left-radius: 5px; 
      -webkit-border-top-right-radius: 5px; 
      -moz-border-radius-topleft: 5px; 
      -moz-border-radius-topright: 3px; 
      border-top-left-radius: 5px; 
      border-top-right-radius: 5px; 
     } 

     #md {width: 400px;} 
    </style> 

HTML

<div id="md"> 
     <fieldset> 
      <legend>some title</legend> 
      <p> 
       <label>Login</label> 
       <input type="text" /> 
      </p> 
      <p> 
       <label>Password</label> 
       <input type="text" /> 
      </p> 
      <p><label>&nbsp;</label> 
       <input type="submit"> 
      </p> 
     </fieldset> 
    </div> 

回答

2

字段集和傳說是臭名遠揚的硬/不可能的風格,特別是跨瀏覽器。它看起來像IE問題可能部分歸因於Color Bleed Bug

就個人而言,我會承認失敗並將傳說設置爲display: hidden;,同時在fieldset中創建標題以使其具有圓角。

相關問題