gpt4 book ai didi

html - Firefox 标签元素边框与相对位置截断

转载 作者:太空宇宙 更新时间:2023-11-04 12:10:11 24 4
gpt4 key购买 nike

我有一些正在使用的自定义复选框。当您选择它们​​时,焦点类将添加到它们中。当发生这种情况时,它周围会出现一个边框。对于大多数浏览器,边框看起来像标签元素周围的正方形。虽然在 Firefox 中左边框被切断。如果删除相对位置,则可以更正问题。尽管我不想出于定位目的这样做。我在这里创建了一个简单的示例:

http://jsfiddle.net/g617z4qk/3/

当您在 firefox 中查看时,请注意它与 chrome 有何不同。我怎样才能使 firefox 像 chrome 一样运行?

这是html代码:

<div class="textContainter">
<label class="input-control checkbox focus">"
<input id="classAll" class="classAll input-control" type="checkbox" name="status" value="Item 1" tabindex="-1" checked="checked" />
<span class="input-control-img"></span>
<span class="input-control-text">test Item 1</span>
</label>
</div>

这是CSS

label.input-control {
display: inline-block;
}
.textContainter .focus {
outline: 1px dotted !important;
}
.input-control, .input-control .input-control-body {
position:relative;
}

label.input-control input {
left: -9999px;
position: absolute;
}

label.input-control.checkbox .input-control-img {
background-image: url("http://blogs.digitss.com/wp- content/uploads/2010/04/fancy-radio-checkbox.png");
}
label.input-control .input-control-img {
background-position: 0 0;
background-repeat: no-repeat;
width: 20px;
}
label.input-control span {
cursor: pointer;
float: left;
height: 20px;
}

最佳答案

将输入元素定位到最左边

label.input-control input {
left: -9999px;
position: absolute;
}

使标签轮廓也向左扩展(至少在 Firefox 中)。

只需为 label 元素添加 overflow:hidden 即可解决此问题:

label.input-control {
display: inline-block;
overflow: hidden;
}

http://jsfiddle.net/g617z4qk/5/

关于html - Firefox 标签元素边框与相对位置截断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29111795/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com