css - Fieldset CSS：有什么方法可以在 Chrome、Firefox 和 IE 之间获得一致的显示？

Question

我试图在浏览器中显示相同的字段集。我创建了一个简单的文件：

<style>
  fieldset
  {
    -moz-border-radius-bottomleft: 7px;
    -moz-border-radius-bottomright: 7px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 7px;
    -webkit-border-radius: 7px;
    border-radius: 3px;
  }
  legend
  {
    color: #696969;
  }
</style>

<fieldset style="width: 440px; float: left;">
  <legend>First Fieldset</legend>
  <table width="310px">
    <tr>
      <td>
        &nbsp;
      </td>
    </tr>
  </table>
</fieldset>
<br clear="all" />
<fieldset style="float: left; width: 440px; padding-top: 10px;">
  <legend>Second Fieldset</legend>
  <div id="innerDiv">
    <table width="100%">
      <tr>
        <td>
          &nbsp;
        </td>
      </tr>
    </table>
  </div>
</fieldset>
<br clear="all" />
<fieldset style="float: right; width: 300px">
  <legend>Third Fieldset</legend>
  <div id="map_canvas" style="width: 100%; height: 350px; border: solid 1px black;">
  </div>
</fieldset>

Chrome 3.0 和 FF 3.6 呈现这几乎相同 - 字段集边框在 Chrome 上有点重，并且在角落有明显的阶梯。IE 的边框稍微细一些，但边角似乎更紧一些。

有没有办法让所有三个浏览器都以相同的方式显示？

Answer 1

我看到您正在尝试创建弯曲的角落。在 IE curvycorners 中执行此操作是一个不错的选择：http ://www.curvycorners.net/demos/ 。只需添加脚本即可。

Answer 2

尝试使用重置样式表。

编辑：经过进一步审查，它已经包含字段集，因此无需添加..