zoukankan      html  css  js  c++  java
  • 近几天开发前端开发问题总结

    1、不知道什么原因在FireFox下输入信息后,刷新、页面没有重新加载而是保存了上一次输入的信息,最后找度娘度了N久,通过设置autocomplete="off" 解决。

    2、css问题:white-space属性知识

    3、    在IE的兼容模式下样式不正常的解决办法

      IE9、IE10兼容模式下其实使用的是IE7内核,所以只能使用IE7能够识别的方法就可以解决,以下列出几种方式:

      3.1、.class{_100px;/*只有IE6识别* /

            +100px;/*只有IE7识别*/ 

            100px;/*其它版本都识别*/}

      selector{
            property:value; /* 所有浏览器 */
            property:value9; /* 所有IE浏览器 */
            +property:value; /* IE7 */
            _property

    当然,注意顺序。根据CSS的优先性,上面的写法,分别针对Firefox、IE8、IE7和IE6显示值。

    3.2、通过Hack来达到不同浏览器的不同效果

      注意下面介绍的这些hack写法仅适用于XHTML1.0。如果没有在HTML最前加上
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html

      xmlns="http://www.w3.org/1999/xhtml">

      区别IE6、7与FF/IE8:
           background:blue;*background:orange;

      区别IE6与IE7/IE8/FF:
           background:green;_background:blue;

       关于IE8的hacks:
      .test{
           color:/***/#00f9; /* IE8 only */

           color:#00f9; /* 适用于所有IE版本 */
      }    

      可同时区分IE8、IE7、IE6、Firefox的CSS hacks:
      .test{
           color:#000; /* Firefox */
           color:/***/#00f9; /* IE8 */
           *color:#f00; /* IE7 */
           _color:#0f0; /* IE6 */
      }

       原理:IE6能识别-,IE7能识别+,IE8和FF都不能识别+和-
      IE8/FF都不识别*,IE7优先识别!important,IE6不能识别!important。

    4、浏览器滚动条滚动到最下方

    window.scrollTo(0, 99999);

    5、关于z-index属性:

      在DOM中如果父元素的z-index值较小时,子元素的z-index值再怎么大,也会被其父元素同级别的元素挡住。

     6、关于position属性

    7、对于得到页面高宽等属性:

    <script>
    function getInfo()
    {
    var s = "";
    s += "
    网页可见区域宽:"+ document.body.clientWidth;
    s += " 网页可见区域高:"+ document.body.clientHeight;
    s += " 网页可见区域宽:"+ document.body.offsetWidth + "
    (包括边线和滚动条的宽)";
    s += " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)";

    s += " 网页正文全文宽:"+ document.body.scrollWidth;
    s += " 网页正文全文高:"+
    document.body.scrollHeight;
    s += " 网页被卷去的高(ff):"+ document.body.scrollTop;

    s += " 网页被卷去的高(ie):"+ document.documentElement.scrollTop;
    s += "
    网页被卷去的左:"+ document.body.scrollLeft;
    s += " 网页正文部分上:"+ window.screenTop;

    s += " 网页正文部分左:"+ window.screenLeft;
    s += " 屏幕分辨率的高:"+
    window.screen.height;
    s += " 屏幕分辨率的宽:"+ window.screen.width;
    s += "
    屏幕可用工作区高度:"+ window.screen.availHeight;
    s += " 屏幕可用工作区宽度:"+
    window.screen.availWidth;
    s += " 你的屏幕设置是 "+ window.screen.colorDepth +"
    位彩色";
    s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
    //alert (s);

    }
    getInfo();
    </script>
    在我本地测试当中:

    在IE、FireFox、Opera下都可以使用
    document.body.clientWidth

    document.body.clientHeight
    即可获得,很简单,很方便。
    而在公司项目当中:
    Opera仍然使用

    document.body.clientWidth
    document.body.clientHeight
    可是IE和FireFox则使用

    document.documentElement.clientWidth

    document.documentElement.clientHeight
    原来是W3C的标准在作怪啊
    <!DOCTYPE
    html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    如果在页面中添加这行标记的话


    在IE中:
    document.body.clientWidth ==> BODY对象宽度

    document.body.clientHeight ==> BODY对象高度

    document.documentElement.clientWidth ==> 可见区域宽度

    document.documentElement.clientHeight ==> 可见区域高度
    在FireFox中:

    document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight
    ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度

    document.documentElement.clientHeight ==> 可见区域高度
    ?
    在Opera中:

    document.body.clientWidth ==> 可见区域宽度
    document.body.clientHeight
    ==> 可见区域高度
    document.documentElement.clientWidth ==>
    页面对象宽度(即BODY对象宽度加上Margin宽)
    document.documentElement.clientHeight ==>
    页面对象高度(即BODY对象高度加上Margin高)
    而如果没有定义W3C的标准,则
    IE为:

    document.documentElement.clientWidth ==> 0

    document.documentElement.clientHeight ==> 0
    FireFox为:

    document.documentElement.clientWidth ==>
    页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==>
    页面对象高度(即BODY对象高度加上Margin高)
    Opera为:
    document.documentElement.clientWidth
    ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==>
    页面对象高度(即BODY对象高度加上Margin高)

    8、关于Jquery

      说来惭愧,jquery用了三年,没有去研究过jquery插件开发。最近开发修改他人用jquery开发的插件才发现自己与他人的差距,要抽出时间来好好的研习下。

  • 相关阅读:
    博客园
    未释放的已删除文件
    ssh连接缓慢
    剑指 Offer 38. 字符串的排列
    剑指 Offer 37. 序列化二叉树
    剑指 Offer 50. 第一个只出现一次的字符
    剑指 Offer 36. 二叉搜索树与双向链表
    剑指 Offer 35. 复杂链表的复制
    剑指 Offer 34. 二叉树中和为某一值的路径
    剑指 Offer 33. 二叉搜索树的后序遍历序列
  • 原文地址:https://www.cnblogs.com/wangjingblogs/p/3324702.html
Copyright © 2011-2022 走看看