ie6的又一个变态问题
2014-03-21 11:18
148 查看
要实现如下的布局:
最开始想的是:
<div class="tab_title"><em class="selected"><span>新闻排行</span></em><em><span>热门课程</span></em></div>
css如下:
#contain_right .tab .tab_title{height:34px;line-height:34px;background:none #fafafa;border-bottom:1px solid #368ee0;}
#contain_right .tab .tab_title em{display:block;float:left;width:78px;height:34px;float:left;height:34px;text-align:center;font-size:14px;}
#contain_right .tab .tab_title em.selected{height:33px;background-color:#fff;border-width:2px 1px 0 1px;border-style:solid solid none;border-color:#368ee0;color:#368ee0;font-weight:700;}
不设置tab_title的overflow属性刚好可以在标准浏览器中正常显示,ie6除外。不管怎么用hack控制selected em的高度都没法实现如图效果。
后面改成在最里面放个span,绝对定位,
<div class="tab_title"><em class="selected"><span>新闻排行</span></em><em><span>热门课程</span></em></div>
#contain_right .tab .tab_title{height:34px;line-height:34px;background:none #fafafa;border-bottom:1px solid #368ee0;}
#contain_right .tab .tab_title em{display:block;position:relative;float:left;width:78px;height:34px;float:left;}
#contain_right .tab .tab_title em span{position:absolute;width:78px;height:34px;text-align:center;font-size:14px;}
#contain_right .tab .tab_title em.selected span{height:33px;overflow:hidden;background-color:#fff;border-width:2px 1px 0 1px;border-style:solid solid none;border-color:#368ee0;color:#368ee0;font-weight:700;}
圈中的很重要,去掉ie6总会多一个像素。
最开始想的是:
<div class="tab_title"><em class="selected"><span>新闻排行</span></em><em><span>热门课程</span></em></div>
css如下:
#contain_right .tab .tab_title{height:34px;line-height:34px;background:none #fafafa;border-bottom:1px solid #368ee0;}
#contain_right .tab .tab_title em{display:block;float:left;width:78px;height:34px;float:left;height:34px;text-align:center;font-size:14px;}
#contain_right .tab .tab_title em.selected{height:33px;background-color:#fff;border-width:2px 1px 0 1px;border-style:solid solid none;border-color:#368ee0;color:#368ee0;font-weight:700;}
不设置tab_title的overflow属性刚好可以在标准浏览器中正常显示,ie6除外。不管怎么用hack控制selected em的高度都没法实现如图效果。
后面改成在最里面放个span,绝对定位,
<div class="tab_title"><em class="selected"><span>新闻排行</span></em><em><span>热门课程</span></em></div>
#contain_right .tab .tab_title{height:34px;line-height:34px;background:none #fafafa;border-bottom:1px solid #368ee0;}
#contain_right .tab .tab_title em{display:block;position:relative;float:left;width:78px;height:34px;float:left;}
#contain_right .tab .tab_title em span{position:absolute;width:78px;height:34px;text-align:center;font-size:14px;}
#contain_right .tab .tab_title em.selected span{height:33px;overflow:hidden;background-color:#fff;border-width:2px 1px 0 1px;border-style:solid solid none;border-color:#368ee0;color:#368ee0;font-weight:700;}
圈中的很重要,去掉ie6总会多一个像素。
相关文章推荐
- ie6的又一个变态问题
- 用一个变态的方法解决winform闪烁问题
- 今天又在一个相同的问题上吃亏了,编码不同造成ie6下css样式不对
- 用 Python 的 Descriptor 特性解决一个变态的问题
- 用 Python 的 Descriptor 特性解决一个变态的问题
- 正规表达式 在查找替换中的使用 一个看类似变态问题的解决
- ie6获取去location.hash的一个问题
- 一个纠结了很久的IE6显示问题
- 又遇到一个ie6下hover失效的问题
- IE6中javascript数组声明语法错误引起的一个问题
- 最近遇到一个很纠结的问题:jquery.autocomplete在IE6下被下拉框遮挡 。
- 今天遇到的一个比较变态的问题
- 关于IE6中遇到的select下拉框遇到的一个问题
- WSARecv参数lpNumberOfBytesRecvd的一个变态问题
- CSS IE6、7下关于Position的一个bug问题分享
- js里面parseInt()在ie6 7 8及低版本火狐、Opera、Safari、Chrome浏览器中的一个兼容性问题
- WSARecv参数lpNumberOfBytesRecvd的一个变态问题
- 搞定最为变态的一个Ubuntu下的问题---- 双系统环境下 Ubuntu只能访问百度、谷歌网站!
- 一个修复IE6 PNG不透明问题不错的解决方案