参见图1和图2:给checkbox设置高度(如height:13px)可以解决该问题。在firefox3和chrome3下均无该问题。这是IE特有的问题。另外可以参考一篇相关文章:
http://robobruin.blogspot.com/2007/09/fixing-ie-checkbox-paddingmargin.html
引用
INPUT type=checkbox 元素的 height 和 width 样式是在 Internet Explorer 5 中实现的。元素的大小设置基于由作者提供的值,除非给定的大小显然低于所需的最小值。大小的尺寸计算如下:
- 若 height 或 width 大于 20 像素,复选框的四周留空将设置为 4 像素,内部高度或宽度将设置为 8 像素。
- 若 height 或 width 小于 20 像素但大于 13 像素,复选框的四周留空将等于所指定的 height 或 width 减去 13 的差的一半。例如,若指定复选框的 width 是 17,四周留空将是: (17-13)/2 = 2 像素。
- 若 height 或 width 小于 12 像素,复选框的四周留空将设置为 0 且内部宽度将设置为作者指定的值。
- 大小: 33.8 KB
- 大小: 31.9 KB
分享到:
相关推荐
checkbox_radio.css是一款用于美化Checkbox和Radio控件的CSS小插件。通过checkbox_radio提供的样式,你可以生成基于bootstrap,或字体图标,或图片的Checkbox和Radio美化样式。
本文将详细介绍如何在兼容IE浏览器的情况下实现`checkbox`的自定义样式。 首先,我们需要了解`checkbox`的基本结构。`HTML`中的`checkbox`由`<input>`标签创建,通常与`<label>`标签配合使用,以提高可点击范围和...
3. 使用JavaScript库:如jQuery UI、Bootstrap等框架提供了跨浏览器的组件,包括自定义的Radio和Checkbox样式。 总之,自定义Radio和Checkbox样式是提高网页设计美感的重要手段。通过熟练运用CSS3选择器,我们可以...
在IT行业中,尤其是在前端开发领域,"checkbox 图片 兼容 JQ"的主题涉及到的是如何在网页中使用图片替换默认的checkbox复选框,并确保这种替换在不同的浏览器,特别是老版本的Internet Explorer(IE)中也能正常工作...
说起来汗颜,如此常用的checkbox我改变样式,居然需要百度,而且百度很久,更可气的是百度很久找不到可行的解决方案。 后来在csscheckbox.com上找到很多样式,结果一测兼容性IE不行。如此一来,耽误了很久的时间。 ...
下面我们将深入探讨如何在不同浏览器下实现复选框的嵌套以及解决可能遇到的问题。 1. **HTML基础知识** 复选框在HTML中的基本语法是`<input type="checkbox" name="example">`,通过`name`属性来定义复选框组,`...
然而,这些元素在默认情况下,其样式受限于浏览器的控制,导致在不同浏览器下的显示效果可能不统一,特别是在较老的版本如IE8中,样式定制能力更弱。为了解决这个问题,我们需要采用特定的技术来实现跨浏览器,特别...
"升级版--支持ie8单选框与复选框自定义样式制作"是一个资源,它解决了在IE8环境下对HTML表单元素,即单选框(radio)和复选框(checkbox)进行样式定制的问题。这个资源是在原有的基础上进行了改进,以适应更广泛的...
在不支持IE8及以下浏览器的情况下,需要注意使用jQuery的兼容性版本,因为这些旧版浏览器可能不支持某些新的JavaScript特性。此外,可以使用polyfill库来弥补某些新特性的缺失。 总的来说,实现“CSS+jQuery带...
此外,CSS的使用也很关键,自定义checkbox的样式可以提升界面的美观度和一致性。我们可以使用`:before`和`:after`伪元素结合CSS3的content属性,以及transition和animation来实现自定义的选中效果。对于不支持CSS3的...
然而,在使用表格布局时,我们经常会遇到一些布局上的小问题,例如在表格的单元格(td)中插入复选框(checkbox)时,复选框无法上下居中的情况。这个问题看似简单,但在实际开发中,却可能对用户体验产生一定影响。...
4. **checkbox与radio的样式定制**:在IE6中,我们不能像其他现代浏览器那样通过CSS直接改变复选框(checkbox)和单选按钮(radio)的样式。一种方法是使用图片替换,将真实的input元素隐藏,显示一个带有背景图的...
首先,`style.css`文件通常包含了用于美化`checkbox`的CSS样式。我们可以使用CSS3的新特性,如伪类选择器`:checked`、`:before`和`:after`,以及`transition`和`transform`等,来改变`checkbox`的外观和交互效果。...
在网页设计中,浏览器兼容性问题常常困扰着开发者,尤其是对于一些特定元素的样式处理,如`checkbox`。本文将详细探讨"赋予`margin`属性的`checkbox`空白边距"这一主题,主要关注在IE6和Firefox(FF)中的表现差异。...
本文将深入探讨如何在`select`中实现复选框(checkbox)选择功能,以及如何在`input`中实现上下滚动浏览条。 首先,让我们关注`select`元素。通常,`select`用于创建一个下拉菜单,用户只能从中选择一个选项。然而...
测试条件: 1.不管出于什么目的,在公共样式中定义了input元素的margin属性,input { margin:0;...在IE6中checkbox距离左边框有4像素的间隔,而在FF中则没有。 解决方法: 1.设置checkbox的width
4. **禁用某些组件**:对于IE8无法正确渲染的组件,如Radio Button和Checkbox,可能需要考虑禁用或提供替代方案。例如,使用jQuery插件来模拟Bootstrap3的样式。 5. **使用Bootstrap2**:如果兼容性问题过于严重,...
这是一个已知问题,没有 100% 兼容性的合理解决方法(尽管改进可能是为常绿浏览器添加MutationObserver支持,但这不适用于 IE10 及以下)。 用法 <checkbox ng-model="" [name=""] [ng-true-value=""] [ng-...
在标题和描述中提到的问题,开发者希望有一种方法,只改变常规input元素的CSS样式,而不会影响checkbox和radio按钮。传统的做法是为每个checkbox或radio按钮添加一个特定的class,然后为这个class编写样式,但这显然...