兼容性— IE6下子元素宽高会撑大父级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border:10px solid black;
        }
        .content{
            width: 400px;
            height: 400px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>
</html>

IE6下效果

其他浏览器下效果

解决方案：编写代码时，尽量使子级元素宽高小于父级

时间： 2024-10-17 07:35:47

兼容性— IE6下子元素宽高会撑大父级的相关文章

兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position：relative属性的子元素

IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; bord

窗口尺寸，文档高，元素宽高的获取方式

一.元素宽高: window.onload = function() {    var oDiv = document.getElementById('div1');     /*        width height        style.width : 样式宽        clientWidth : 可视区宽        offsetWidth    : 占位宽    */        alert( oDiv.style.width );    //100    alert( o

页面宽高，窗口宽高，元素宽高，元素位置，页面滚动距离

页面宽高: document.body.clientWidth/Height(不包括margin) document.body.offsetWidth/Height(不包括margin) document.body.scrollWidth/Height(包括margin) tips: 1.如果不是最大化浏览器窗口,且在body标签设置min-width,document.body.offsetWidth会比document.body.clientWidth多出2px,那就是滚动条旁边的2px空白

各种情况上JS获取元素宽高

各种情况下JS获取元素宽高 为了叙述简单,这里仅拿width示例. 情景一,元素style属性设置了width/height <div style="width:996px">test<div><script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width);</script>默认分类 如上,使用el.style.width即可. 如果没有

CSS子元素居中(父元素宽高已知，子元素未知)

<style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; width:50px; height:50px; //宽高可以不写 } </style> <div class="container"> <div class=&quo

js获取隐藏元素宽高的方法

网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo

javascript DOM元素宽高

获取元素位置 offsetLeft 元素相对于父元素的左边距离 offsetHeight 元素相对于父元素上部的距离 offsetLeft和style.left的区别 offsetLeft是只读的:style.left是可读写的,要改变元素的位置,只能使用style.left offset返回的是一个Number:style.left返回的是字符串,如“30px” style.left需要在HTML中直接定义.在CSS样式表中定义,是无法获取这个属性的 这里引出一点: 如果要获取元素属性的话,这

jQuery中几个关于元素宽高方法的区别

几个关于元素宽高的方法 height():带参数设置,不带参数获取,参数是number类型 width():带参数设置,不带参数获取,参数是number类型 innerHeight() :内边距+内容的高度 innerWidth() :内边距+内容的宽度 outerHeight:上下内边距+内容+上下边框 outerWidth :左右内边距+内容+左右边框 案例测试: <!DOCTYPE html> <html lang="en"> <head> &

原生JS获取元素宽高实践详解

开篇的话 任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排查出是获取元素高度那里出了问题,这个问题记忆在书上或视频中看到过,许久没用,用的时候就想当然了.遂决定深入剖析用法,增加记忆,记录发表出来,也能给各位前端同行.求学者增加印象. 出错之处 秉承结构.样式.行为分离的宗旨,每次不管大小案例都是分开写html.css.js.这也算抛砖引出了我犯错的玉. 原css