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 }
最后献上做的控件:

IE下元素设置百分比的问题的更多相关文章
- absolute和relative元素 设置百分比宽高的差异
一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...
- HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客
原文:HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/HobHunter ...
- 元素设置position:fixed属性后IE下宽度无法100%延伸
元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...
- ios下元素溢出设置 overflow:auto; 不能滑动解决办法
ios下元素溢出设置 overflow:auto; 不能滑动解决办法: overflow:auto; overflow-y:scroll; -webkit-overflow-scrolling:tou ...
- IE6、7下块级元素设置display:inline-block不换行的解决办法
使用背景 在实际的工作中,我们有的时候会把块元素设置为inline-block,这样做的目的有2个,一是块元素能够排列到一行,二是块元素就形成包裹性,能够自适应content area,而不必设置宽和 ...
- [转载]css菜鸟之HTML 中块级元素设置 height:100% 的实现
HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...
- HTML学习之给div高度设置百分比不生效的问题
这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: < ...
- css菜鸟之HTML 中块级元素设置 height:100% 的实现
HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...
- height设置百分比的条件
很多时候我们在给height设置百分比的时候不起作用, 这时候就要来谈谈什么情况下才起作用了 1)所有父级元素必须有高度: 2)必须是块级元素,行内元素不起作用: 3)ie9 以下 使用 positi ...
随机推荐
- POJ3616 Milking Time【dp】
Description Bessie is such a hard-working cow. In fact, she is so focused on maximizing her producti ...
- NOIP2016 DAY1 T2天天爱跑步
传送门 题目描述 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.«天天爱跑步»是一个养成类游戏,需要玩家每天按时上线,完成打卡任务. 这个游戏的地图可以看作一一棵包含 ...
- apacheAB测试指标
在进行性能测试过程中有几个指标比较重要: 1.吞吐率(Requests per second) 服务器并发处理能力的量化描述,单位是reqs/s,指的是在某个并发用户数下单位时间内处理的请求数.某个并 ...
- Jet --theory
(FIG. 6. A caricature of turbulent jet and the entrainment., Jimmy, 2012) Ref: Jimmy Philip, Phys. F ...
- react入门----基础语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【04】JSONP 教程
JSONP 教程 Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 为什么我们从不同的域 ...
- 【6572】关于mtk平台display模块的学习探讨
现在在学习mtk的display subsystem,有遇到流程上不太清楚地地方想要询问: 1.cmd模式和video模式framebuffer如何更新, 以及两种模式的差异? cmd和video m ...
- PatentTips – Shader Interfaces
BACKGROUND Today's graphic processing units (GPUs) host all of the computations necessary to generat ...
- cogs—— 310. [POJ2395] Out of Hay
310. [POJ2395] Out of Hay ★☆ 输入文件:outofhay.in 输出文件:outofhay.out 简单对比 时间限制:1 s 内存限制:128 MB De ...
- 1154 能量项链 2006年NOIP全国联赛提高组 codevs
1154 能量项链 2006年NOIP全国联赛提高组 codevs 题目描述 Description 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头 ...