兴国资源网

关于居中布局和IE双倍边距bug
站长资源 2024/11/1 佚名
2 0
兴国资源网 Design By www.nnzcdc.com
今天google了一下css居中布局的问题，结果差不多都是引用了同一篇文章。在ie中要居中，只要在<body>元素中定义text-align:center;的属性。而在firefox中，需要定义一个wrapper包裹器。然后指定margin-left:auto;margin-right:auto;的属性来使区块在firefox中居中。其实，我自己都是用margin:auto;的缩写margin属性来设定居中。margin缩写属性是上、右、下、左的顺时针顺序来设定四个方位的页面边距的。需要注意的是，如果你据此以为只要设定margin-top:auto;属性后就想使区块居中的话，那你就错了。用这种方式的时候，非得同时设定margin-left:auto;margin-right:auto;属性才能居中。但是，你设定margin:0 auto;这样的方法也是可以居中的。
另外一种居中的方法是在使用绝对定位的前提下，用left：50%+margin-left:-375px;的组合方式来居中。两种居中方式如下。
复制代码 代码如下:
/* 方法一 */
body {
    background: #00FF7F;
    text-align: center; /* hack for ie center alignlayout */
}
#wrapper{
    background: Aqua;
    width: 750px;
    margin:auto; /* 或者 margin-left:auto;margin-right:auto;*/
}
/* 方法二 */
#wrapper2 {
    position: absolute;
    width:750px;
    left:50%;
    margin-left:-375px;
    background: Orange;
}


我个人一直使用方法一的方式来居中，因为感觉方法二的区块缺乏必要的刚性，代码也不太好理解。如果你缩小方法二的窗体到一定限度，就会看到整个布局会出现流动的情况。当然有人要的就是这种效果。:)，另外方法二的一个好处是在其他嵌套区块中不必覆盖body元素的text-align: center;的设定，因为大部分文本还是会以左对齐居多。这样一定程度上可以减少一点冗余。不过我觉得这个好处可以忽略不计。总之，大家根据各自喜好各取所需便是。

另外一个是ie的双倍边距的bug,解决方法就是加上display:inline;的设定即可。其实这个解析错误的bug会影响很多方面。如果你遇到css布局在ie中间距表现异常的时候，就可以试试看加上display:inline;的属性申明了。而且在一定特定的布局问题问题，需要组合使用display:block;和display:inline;才能让布局如你所愿。我在一个unorder list控制的图片菜单中就遇到过类似的问题。

尽快各种不同的浏览器都有css bug,但是css页面布局方式发展到今天，已经比较成熟了，因为bug而让你抓狂不已的发生机率已经不大了。如果有问题，多查查搜索引擎能够解决你大部分的问题。如果，平时闲着的时候，可以作些试验的话，也许更能够在紧急情况下也能够泰然自若。
兴国资源网 Design By www.nnzcdc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
兴国资源网 Design By www.nnzcdc.com
www.nnzcdc.com 兴国资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
兴国资源网 Design By www.nnzcdc.com