0

我正在制作一个选项菜单，我希望能够使用复选框启用/禁用部分菜单。所以我在这里尝试了 3 件事，它们在 Chrome/Firefox 中运行良好并且看起来还不错，但我不知道如何让它在 IE 中看起来也不错。

  1. 我首先尝试使用字段集并偏移其中的图例和复选框，请参见此处：字段集
  2. 然后我尝试使用 div 和 label 做类似的方法，见这里：div/label
  3. 最后我尝试将标签/复选框移到 div 之外，但它在 IE 中看起来很糟糕，请参见此处：div/label outside div

我不太擅长不同浏览器的 CSS，所以如果这是一个非常简单的常见事情，我很抱歉，但我无法从我对谷歌的想法中找到任何关于它的信息。

我的所有逻辑工作正常，我只是想在这里正确显示 html/css，所以不需要发布带有 javascript 启用/禁用内容的答案。

这是尝试 1 的 HTML：

<fieldset class="groupBox">
<legend>Load template automatically</legend>
<input id="LoadTemplateCheckBox" type="checkbox" class="fieldsetCheckbox" />
<div id="templateDiv">
    <label>Root Path:</label>
    <input type="text" id="templateLocation" readonly="true"/>
    <button type="button">...</button>
</div>
</fieldset>

和相关的CSS：

.fieldsetCheckbox{
  width: 16px;
  margin-top: -31px;
  margin-left: -14px;
  float: left;
}

.groupBox{
  padding: 15px;
  border: 2px solid #ccc;
  margin: 0px 0px 5px 0px;
}
4

1 回答 1

2

将输入放在图例中怎么样，如下所示：http: //jsfiddle.net/dv866/6/

<legend>
    <input id="LoadTemplateCheckBox" type="checkbox" class="fieldsetCheckbox" />
    Load template automatically
</legend>
于 2013-08-20T09:35:11.653 回答