最近在解决浏览器兼容性,因为开发是在FF下开发的,容错率较高,导致用ie8打开好多错乱的,事情看起来很复杂,但是得一步一步来做。在做到表格的中内容过多显示省略号的时候发现第一列的checkbox列也有省略号,很意外也很好奇,f12查看样式,发现外层的div上起效的是bootstrap默认的box-sizing:border-box的样式并且div是有margin-top和margin-right的。奈何这个不是我想要的呀,于是给重写覆盖掉了,好了上一下简单代码
<DIV class=checker> <SPAN> <INPUT class=mschk-sub value=on type=checkbox jQuery110205319174049236357="206"> </SPAN> </DIV> *, *:before, *:after { box-sizing: border-box; }
覆盖样式
.checker{ box-sizing : content-box ; }
就达到效果啦,
特此标记以顾后来回首
相关推荐
然而,Bootstrap的一些默认样式有时可能会与其他组件产生冲突,比如在本文提到的问题:Bootstrap的box-sizing样式导致UEditor图片无法正常缩放。 在CSS中,`box-sizing`属性是用来控制元素的盒模型如何解析其内容、...
例如,如果一个搜索框需要特定的宽度和高度,而Bootstrap的默认样式又设置了`border-box`,则可能需要覆盖这些样式来实现理想的外观和布局。 此外,`box-sizing: border-box;`的一个巧妙应用是在宽度为百分比的容器...
例如box-sizing: border-box、margin tweaks等都存放在一个单独的 Sass 文件中。 新的自定义选项:不再像上个版本一样,将渐变、淡入淡出、阴影等效果分放在单独的样式表中。而是将所有选项都移到一个Sass变量中。想...
最终,定位到Bootstrap的CSS中有一个通配符样式"*"(代表所有HTML标签),这一通配符样式使用了-box-sizing:border-box属性,与甘特图div的默认样式产生了冲突。 解决该问题的方法是,首先定义一个新的CSS规则覆盖...
`会使元素的总尺寸包含边框和内边距,而`box-sizing: content-box;`则是默认的W3C盒模型。 Bootstrap框架在响应式设计中扮演着重要角色,它提供了预设的CSS类,简化了栅格系统、响应式布局和组件的设计。在处理盒子...
初始化CSS样式的主要目的是消除浏览器之间的默认样式差异,确保在不同浏览器上呈现一致的布局。 首先,我们需要理解为什么需要进行CSS样式初始化。不同的浏览器对某些元素的默认样式处理可能存在差异,例如,列表项...
可以通过设置`*{box-sizing:border-box}`来统一盒模型。 6. **PNG透明度**:IE6不支持PNG24的透明效果,可以使用AlphaImageLoader滤镜来解决。 7. **DOCTYPE声明**:确保文档使用正确的DOCTYPE,这会影响IE的渲染...
Bootstrap 提供了三种类型的表单布局:垂直表单(默认)、内联表单和水平表单。 1. 垂直表单(默认):每个表单项都占用一行, Label 和输入框在同一行中。 2. 内联表单:Label 和输入框在同一行中,但它们之间没有...
讨论了`box-sizing`属性的作用,以及Bootstrap是如何利用它来控制元素的盒模型。 **Predefined CSS classes** 列举了Bootstrap提供的预定义CSS类,这些类使得开发者可以快速地应用样式。 **Sass variables and ...
- `box-sizing: border-box`:改变元素的盒模型,使边框和内填充包含在元素的总宽度和高度内。 - `transform: translate(-50%, -50%)`:使用CSS变换将元素定位到其父元素的中心。 - `box-shadow`:为元素添加阴影...
首先,问题的症结在于Bootstrap中全局应用的`* {box-sizing:border-box;}`,这重置了浏览器的默认盒子模型,导致layDate的样式受到影响。盒子模型决定了元素的总宽度和高度,包括边框和内边距。`border-box`模式下,...
此bug主要出现在使用jQuery UI的resize功能时,尤其是当页面元素应用了CSS的box-sizing: border-box属性,并与Bootstrap框架一同使用时。 首先,我们需要了解box-sizing属性的两种模式:content-box和border-box。...
- `box-sizing` 确定元素的尺寸计算方式,包括 `content-box`(默认)和 `border-box`。 - `float` 用于浮动元素,如 `left` 或 `right`。 - `clear` 阻止元素浮动,`both` 清除左右浮动。 以上是CSS中的一些基本...
box-sizing: content-box; height: 0; overflow: visible; } ``` normalize.css的优点在于它减少了不必要的样式重写,保持了部分有用的基本样式,同时解决了跨浏览器的兼容性问题。然而,它可能不如reset.css那样...
不同的浏览器默认盒模型可能不同,通过`box-sizing`属性可以统一设置。 3. **布局**:CSS提供了多种布局方式,如传统的流式布局、浮动布局,以及现代的Flexbox(弹性盒子布局)和Grid(网格布局),它们使页面元素...
可以通过`box-sizing`属性来切换盒模型。 2. 定位模式:CSS提供了相对定位、绝对定位、固定定位和静态定位四种定位方式。相对定位使元素相对于其正常位置移动,不脱离文档流;绝对定位相对于最近的非静态定位祖先...
开发者可以通过设置`box-sizing`属性来调整盒模型的行为。 2. 浮动元素:IE6在处理浮动元素时会出现双倍边距问题,即当一个浮动元素设置了`margin: 0 auto;`时,其左右边距会被错误地加倍。解决办法是在浮动元素...
为解决此问题,可以使用`box-sizing`属性设置为`border-box`。 2. **CSS Hack策略** - **条件注释**:IE支持特定的条件注释,如`<!--[if IE]>...<![endif]-->`,允许我们针对IE编写特定的CSS代码。 - **特性前缀*...
box-sizing: border-box; } body { resize: none; } ``` 在移动端,我们需要创建一个“版心”容器来限定网页主要内容的宽度,确保在不同设备上都能良好展示。通常设定最大宽度和最小宽度,如640px或750px,以适应...