.target { min-height: 100px; height: auto !important; height: 100px; // IE6下内容高度超过会自动扩展高度 }
ol
内li
的序号全为 1,不递增。解决方法:为 li 设置样式display: list-item;
未定位父元素overflow: auto;
,包含position: relative;
子元素,子元素高于父元素时会溢出。解决办法:1)子元素去掉position: relative;
; 2)不能为子元素去掉定位时,父元素position: relative;
<style type="text/css"> .outer { width: 215px; height: 100px; border: 1px solid red; overflow: auto; position: relative; /* 修复bug */ } .inner { width: 100px; height: 200px; background-color: purple; position: relative; } </style> <div class="outer"> <div class="inner"></div> </div>
a
标签的:hover
伪类,解决方法:使用 js 为元素监听 mouseenter,mouseleave 事件,添加类实现效果:<style type="text/css"> .p:hover, .hover { background: purple; } </style> <p class="p" id="target">aaaa bbbbb<span>DDDDDDDDDDDd</span> aaaa lkjlkjdf j</p> <script type="text/javascript"> function addClass(elem, cls) { if (elem.className) { elem.className += ' ' + cls; } else { elem.className = cls; } } function removeClass(elem, cls) { var className = ' ' + elem.className + ' '; var reg = new RegExp(' +' + cls + ' +', 'g'); elem.className = className.replace(reg, ' ').replace(/^ +| +$/, ''); } var target = document.getElementById('target'); if (target.attachEvent) { target.attachEvent('onmouseenter', function () { addClass(target, 'hover'); }); target.attachEvent('onmouseleave', function () { removeClass(target, 'hover'); }) } </script>
opacity
,解决办法:.opacity { opacity: 0.4 filter: alpha(opacity=60); /* for IE5-7 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/ }
height
小于font-size
时高度值为font-size
,解决办法:font-size: 0;
display: inline-block
解决办法:设置 inline 并触发 hasLayoutdisplay: inline-block; *display: inline; *zoom: 1;
display: inline;
这样解决问题且无任何副作用:css 标准规定浮动元素 displaytext-align: center;
本文作者:前端小毛
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!