• CSS浏览器兼容性与解决


    一、超链接访问后hover样式不出现

      1、现象描述:

        同时设置了a:visited和a:hover样式,但一旦超链接点击过后,hover的样式就不再出现了。

      2、解决方法:

        调整样式顺序为先a:visited再a:hover即可。

        a标签四种状态的排序:l(link)ov(visiter)e h(hover)a(active)te

    二、行内元素上下margin和padding不拉开元素间距

      1、现象描述:

        行内元素的margin和padding在水平方向的都产生边距效果,但竖直方向的都没有效果。

        (1)HTML代码:

    <div>块级元素</div>
    <span>行内元素</span>

        (2)CSS代码:

    div {
        background: gray;
        padding: 20px;  
    }
    
    span {
        background: green;
        padding: 20px;
        margin: 20px;      
    }

      2、解决方法:

        将行内元素display设置为block或inline-block即可。

        (1)CSS代码:

    span {
        background: green;  
        padding: 20px;
        margin: 20px;
        display: block/inline-block;
    }

    三、浮动背景:

      解决浮动背景,可在<head></head>之间相应的位置输入以下代码:

    <style type='text/css'>
        <!--
        body {
            background-image: url(image/bg.gif);
            background-attachment: fixed;
        }
        -->
    </style>

    四、list-style-image无法准确定位的问题:

      解决list-style-image无法准确定位的问题,可在<head></head>之间相应的位置输入以下代码:

    <style type='text/css'>
        <!--
        li {
            list-style: url('http://gluu5.163.com//E/11/6.gif');
        }
    
        li a {
           position: relative;
           top: -5px;
           font: 12px/25px 宋体;
        }
        -->
    </style>

    五、设置滚动条的颜色:

      设置滚动条的颜色,可在<head></head>之间相应的位置输入以下代码:

    <style type='text/css'>
        <!--
        html {
           scrollbar-face-color: #F6F6F6;
           scrollbar-highlight-color: #FFF000;
           scrollbar-shadow-color: #EE00EE;
           scrollbar-face-color: #F6F6F6;
           scrollbar-3dlight-color: #EE222E;
           scrollbar-arrow-color: #CCC000;
           scrollbar-track-color: #DDEECC
           scrollbar-darkshadow-color: #FFFDDD;
        }
        -->
    </style>

    六、innerText在IE下正常,但在FireFox下却不行:

      解决此问题需要textContent:

      (1)JQuery代码:

    if(navigator.appName.indexOf('Explorer') > -1) {
        document.getElementById('element').innerText = 'My text';  
    } else {
        document.getElementById('element').textContent = 'My text';
    }

    七、ul和ol的列表缩进问题:

      消除ul和ol的列表缩进问题,应写成如下样式:

    ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    ol {
        padding: 0;
        margin: 0;
        list-style: none;
    }
  • 相关阅读:
    [Jsp] JSP的九个内置对象
    [Linux] 完整删除用户帐号
    Title:it has been a long time.
    Problem and Solution : Unable to resolve target 'android9'
    Click Button to change the color of TextView
    Bundle使用(不同的Activity之间传递数据)
    实例方法和类方法
    Use DIffent Font and Size.
    子类继承的成员方法
    StartActivityForResutl,Bundle(Return data to exActivity)
  • 原文地址:https://www.cnblogs.com/minozMin/p/8178872.html
Copyright © 2020-2023  润新知