IE下元素设置百分比的问题

  场景:近两天在做一个控件,该控件是一个tab型的,并且该tab有可能是两个tab标签,也有可能是多个tab标签,为了能够适应这种动态需求, 在设置标签宽度的时候,直接用的最外层容器除以tab的个数,然后加上百分比。

问题:这种情况在chrome上和IE8+上都没有发现问题,但是公司有一个项目是十年前的,必须要在IE杂项上才可以正常显示,此时我的控件就出现了问题。tab页签不能并排显示,而是换行显示了。经过排查,发现每个tab页的宽度都是设置为50%,假设外层容器宽度为501,两个tab的宽度都被解析为251px,但是两个tab的宽度加起来,已经大于外层容器了。问题就出现了。

 重现:chrome下

  

IE7下:

知道问题原因了, 解决起来就相对简单了,当然了,也可以向下取整。处理方式有很多种。

 1 /**
 2      * 添加tab
 3      * @param {Object} dataIndex 下标
 4      * @param {Object} tabName tab名称
 5      */
 6     Clk.prototype.createTab = function(dataIndex,tabName){
 7         var $li = $(‘<li style="width:‘+(100/this.opts.shows.length-1)+‘%"><a href="javascript:;">‘+tabName+‘</a></li>‘);
 8         $li.attr(‘data-index‘,dataIndex);
 9         this.$tabs.append($li);
10     }

最后献上做的控件:

时间: 2024-10-27 08:32:00

IE下元素设置百分比的问题的相关文章

【Flex】子元素设置百分比高度生效的解决方法

一.问题描述: 当使用Flex布局时,子元素设置百分比高度后,如下图没有效果: 二.解决方法: 父元素必须设置高度,效果如下图: 三.完整代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi

table 元素设置relative时,在ie\firefox下背景颜色会覆盖边框

table 元素设置relative时,在ie\firefox下背景颜色会覆盖边框,解决办法: http://my.oschina.net/u/1540190/blog/295600 不是老外多厉害,而是自己没有理解透彻html属性,遇到问题时不知道从哪下手了,上网搜索解决办法是提倡的,效率高.但搜索到答案时要学会思考,自己无法解决的原因在哪,总结一下,下次自己可能就会处理了~

IE6、7下块级元素设置display:inline-block不换行的解决办法

使用背景 在实际的工作中,我们有的时候会把块元素设置为inline-block,这样做的目的有2个,一是块元素能够排列到一行,二是块元素就形成包裹性,能够自适应content area,而不必设置宽和高(依实际情况而定),在现在浏览器中没有什么问题,但是IE6.7下,当把block元素设置成inline-block之后,还是在分别的两行,下面我们看一下现象. 代码以及IE6.7下的表现 CSS: body { padding: 10px; } .block_to_inlineblock, .in

ios下元素溢出设置 overflow:auto; 不能滑动解决办法

ios下元素溢出设置 overflow:auto; 不能滑动解决办法: overflow:auto; overflow-y:scroll; -webkit-overflow-scrolling:touch; height:200px;

height设置百分比的条件

很多时候我们在给height设置百分比的时候不起作用, 这时候就要来谈谈什么情况下才起作用了 1)所有父级元素必须有高度: 2)必须是块级元素,行内元素不起作用: 3)ie9 以下 使用 position:ralative 的块级 元素使用 高度百分比是无效的. 满足这几个条件,不起作用都难

属性设置百分比时的计算参考汇总

元素宽高 width,min-width,max-width等元素宽度设置百分比,以包含块的宽度为标准进行计算: height,min-height,max-height等元素宽度设置百分比,以包含块的高度为标准进行计算: 内外边距 margin,padding设置百分比时,在默认(水平)书写模式下,以包含块的宽度为标准进行计算,其他情况以包含块的高度进行计算.所以正常情况下,margin-top,padding-top 等垂直方向上的内外边距也都是以包含块的宽度进行计算的 定位 left,ri

HTML 中块级元素设置 height:100% 的实现

HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什么height:100%不起作用呢? 按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离.例如,如果一个div元素的CSS是height: 100px;,那它应该在页面的竖向空间里占满100px的高度. 而跟W3C的规范,百分比的

【温故而知新-Javascript】为DOM元素设置样式

1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleSheet 对象代表,它提供了一组属性和方法来操作文档里的样式. 1.1 获得样式表的基本信息 第一步是获得定义在文档中的样式表的一些基本信息. <!DOCTYPE html> <html lang="en"> <head> <meta charse

给所有浏览器的元素设置了一个共同的样式:Normalize.css

使用Normalize.css重置默认样式 CSS重置有助于根据所有设置的样式建立一个基准样式.样式重置有效重写了浏览器某些元素(在浏览器里有很大的不同)默认的样式. 尽管CSS resets在过去的几年里很受欢迎,但是,很多网站至今也没有使用,这些网站CSS的可扩展性因css resets会有很大的困难. 大多数人推荐使用normalize.css重置默认样式,而不是使用由Eric Meyer写的非常流行的CSS Reset或者自己写的Reset.Normalize.css给所有浏览器的元素设