zoukankan      html  css  js  c++  java
  • css hack 和问题

    浏览器特定的选择

    当你想改变一个样式在一个浏览器而不是其他这些选择是非常有用的。

    IE 6及以下

       * html {}

    IE 7及以下

       *:first-child+html {} * html {}

    IE 7只

       *:first-child+html {}

    IE 7和现代浏览器只

        HTML> BODY {}

    现代浏览器只(不是IE 7)

        HTML> / ** / BODY {}

    最近的歌剧版本9及以下

        html:first-child {}

    Safari浏览器

       html[xmlns*=""] body:last-child {}

    要使用这些选择器,将代码中的风格面前。例如:

        

    #content-box {
        300px;
        height: 150px;
    }

    * html #content-box {
        250px;
    } /* 重写上面的风格,在IE 6及以下*改变了宽度为250像素 */

     

     

    透明PNG在IE6

    一个IE6的bug造成了很大的麻烦的是,它不支持透明的PNG图像。

    你将需要使用一个过滤器,覆盖的CSS。

    * html #image-style {
         background-image: none;
         filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png", sizingMethod="scale");
    }


    移除链接点

    Firefox的产生,大约链接出现,当你点击它们的点状轮廓。

    虚线链接

    这是简单的停止。只需添加outline:none:none一个a标签

    a {
        outline: none;
    }


    应用宽度内联元素

    如果你申请一个宽度为一个内联元素,将只工作inIE6其实,这是IE6的故障-内联元素不应该需要有分配给它们的宽度。但是它往往是有用的,例如,如果你想在表单中所有的标签是相同的宽度。

    所有的HTML元素或者是一个块或内联元素。内联元素包括跨度强大的EM块元素包括的divpH1形式

    你不能改变一个内联元素的宽度。解决的办法是从内嵌阻止更改的元素。

    span {
          150px;
         display: block
    }

    申请显示:块会变成跨度为一个块元素,允许您更改宽度。有一件事不过要注意的是块元素将总是开始一个新行,所以你可能需要使用浮点数为好。

    围绕一个固定宽度的网站

    要集中你的网站在浏览器内,相对定位添加到外层div,然后设置边距为自动。

      #wrapper {
         margin: auto;
         position: relative;
    }



    中心内容

    图片替换技术

    它始终是最好使用文字而不是标题的图像。在奇怪的时刻,当你必须有一个形象最好是使用背景图像与一个div内隐藏的文本。这对于屏幕阅读器和搜索引擎优化非常有用,因为它仍然使用普通的文本,所有与此相关的利益。

    HTML:

    <h1><span>Main heading one</span></h1>

    CSS:

       

    h1 {
          background: url(heading-image.gif) no-repeat;
    }

    h1 span {
         position:absolute;{
         text-indent: -5000px;{
    }

     

    正如你可以看到,我们使用的是普通的HTML代码为H1标签,并使用CSS来替换图像中的文字。文本缩进将文本5000px的左侧,使得对用户不可见。

    请尝试关闭你的CSS样式在您的网站,看看标题看起来。

    最小宽度

    在IE的另一个错误是,它不支持最小宽度。最小宽度是非常有用的,特别是对于有100%的宽度灵活的模板,因为它告诉浏览器停止收缩。对于所有浏览器,除了IE6的所有你需要的是min-Xpx; 例如:

    .container {
        min-300px;
    }

    得到这个工作在IE6需要一些额外的努力!要开始你将需要创建2的div,一是嵌入到其他。

    <div class=”container”>
         <div class=”holder”>Content</div>
    </div>

    然后,你将需要最小宽度那张外层div。

    .container {
        min-300px;

    现在,这是IE的黑客开始发挥作用。您将需要包括下面的代码。

        

    * html .container {
         border-right: 300px solid #FFF;
    }

    * html .holder {
        display: inline-block;
        position: relative;
        margin-right: -300px;



    随着浏览器窗口大小改变外层div的宽度减小,以适应直到它缩小到边框宽度,在这一点上不会进一步收缩,任意。持有人的div如下西装,也停止萎缩。外格边框宽度变内部div的最小宽度。

    隐藏横向滚动

    要删除水平滚动条,请将overflow-x: hidden;进入人体

    body {
        overflow-x: hidden;
    }


    如果你决定要具有较大的宽度比浏览器图片或Flash文件,这是非常有用的。

  • 相关阅读:
    Java 递归算法,遍历文件夹下的所有文件。
    基于appium的移动端自动化测试,密码键盘无法识别问题
    第一个脚印
    最简单ajax,$.post()用法
    关于图片title与alt
    iframe loading 效果
    iframe 跨域的高度自适应
    练习卷动式新闻广告牌
    JS学习笔记《数值与字符串相加篇》
    解决FLASH的层级问题
  • 原文地址:https://www.cnblogs.com/leejersey/p/3493873.html
Copyright © 2011-2022 走看看