zoukankan      html  css  js  c++  java
  • 兼容浏览器的布局CSS

    要保证CSS效果在IE和Firefox下兼容的话,推荐如下:

    1:尽量少的使用Margin,使用padding来设置距离,margin太不稳定了,

    (当碰到莫名其妙的时候,试试这条。将margin设为0,单独设置padding)


    2:如果要设置float的话,心里问下自己是否会溢出(内容溢出),会有什么结果中,如果有的话,

    解决方案有很多种,最简单的在后面加个<br />,设置<br />的style:display:none;clear:both;。

    楼下有说先设置float:right,后设置float:left,至今不明白,能不能详细解释下


    3:作为容器的div的position最好设置为relative,以作为子内容的定位元素,如果确定设置position为absolute没什么影响的话,也可以设置为absolute;

    这里有一点是不要设置其left和top,这样主要是为了方便内部元素,当我们知道内容元素的定位元素就是它的上级元素的时候,定位也相对容易点,当然了高手可以略过。


    4:body,以及一些比较大的容器div的margin最好设置为0,padding也为0;因为margin在浏览器中兼容性是不好,主要是全局配置。


    5: ul的margin要显式的设定其值,比如:ul{margin:10px;},不显式指定的话,在IE和firefox下其margin会不同。


    6:CSS开始布局CSS:

    body{margin:0px;padding:0px; text-align:center}//这里做一些全局配置

    #container{margin:1px auto 0px auto ; XXXX; text-align:left;}

    //设置大div居中,注意这里的每个细节

    1:margin:1px auto 0px auto;可以达到居中效果,即在IE和Firefox下居中,主要是左右的margin为auto;

    2:xxxx;设置大div的宽度,主要作用是为了防止当浏览器分辨率的变化给div造成影响,因为这个是根div,所以为了好布局,我固定它的宽度,大家可以看看163,xunlei,sohu,这些门户网站,可以发现最大的那个div宽度是固定的。

    3:text-align:left:设置内容为左对齐。

    复制代码
    1 <html>
    2 <head>
    3 <title>Test</title>
    4 <body>
    5 <div id="container"></div>
    6 </body>
    7 </html>
    复制代码


     

  • 相关阅读:
    es5预览本地文件、es6练习代码演示案例
    Java实现 LeetCode 838 推多米诺(暴力模拟)
    Java实现 LeetCode 838 推多米诺(暴力模拟)
    Java实现 LeetCode 838 推多米诺(暴力模拟)
    Java实现 LeetCode 837 新21点(DP)
    Java实现 LeetCode 837 新21点(DP)
    Java实现 LeetCode 837 新21点(DP)
    Java实现 LeetCode 836 矩形重叠(暴力)
    Subversion under Linux [Reprint]
    Subversion how[Reprint]
  • 原文地址:https://www.cnblogs.com/amylis_chen/p/2658450.html
Copyright © 2011-2022 走看看