WEB前端笔记

HTML+CSS部分

IE6使用PNG的透明问题

解决关键字 DD_belatedPNG_0.0.8a.js Google或百度一下,下载之

<!--[if lte IE 6]>
<script type="text/javascript" src="DD_belatedPNG_0.0.8a.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('div, ul, img, li, input, a');
</script>
<![endif]-->

说明:fix方法的参数是你需要进行透明化的标签,或者类都可以

 

关于处理浮动的定义:

clear:both——清除浮动

overflow:hidden——闭合浮动

 

inline-block元素的空白间距问题(会出现在 IE8-9、Firefox、Safari 这几个浏览器上【间距4px】,Chrome上也会出现【间距8px】)

解决方式是先设置父元素的font-size为0,然后在inline-block元素中重置需要的字体大小

  .ul {
  letter-spacing: -4px; /*用来兼容safari,根据不同字体字号或许需要做一定的调整*/
  word-spacing: -4px; /*用来兼容safari,根据不同字体字号或许需要做一定的调整*/
  font-size: 0;
  }  

  .ul li {
  font-size: 16px; 
  letter-spacing: normal;  
  word-spacing: normal;  
  display:inline-block;  
  *display: inline;
  zoom:1;  
  }  

当页面一定要用A标签,又不想做跳转,href属性又不能去掉,可以用####,这样页面就不会跳转了


IE6的浮动使用问题

当运用浮动,并且各个浮动子元素的宽度之和大于父元素的宽度,这时子元素会自动换行排列(常用的信息显示布局)。

但在IE6之下,本来刚刚好的宽度却怎么也对不上号,导致出现布局异常。

要解决这个问题,只要给子元素的CSS都加上background属性则可。

通常浮动的子元素本来就有用到background这个CSS属性的话,是不会出现这个问题的。所以当遇到这个问题,解决方法是给子元素的CSS都加上background:none

 

同样是IE6浮动布局,在IE6环境下,当使用DIV浮动布局时,父级容器无法根据浮动的子容器的高度进行高度自适应,这是可在父级容器使用样式(zoom:1),这样就能解决问题了

 

Google浏览器下,字体小于12px时会无效,解决方法是加上下面样式

html,body{
    -webkit-text-size-adjust:none;
}

 

Google浏览器HACK

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* 在这里面写的样式(.test)只针对Google Chrome、Safari 3.0、Opera 9 的CSS样式 */

    .test{color:#f00;}
}

 

IE浏览器HACK

.ie6_7_8{
    color:blue; /*所有浏览器*/
    color:red\9; /*IE9以及以下版本浏览器*/
    *color:green; /*IE7及其以下版本浏览器*/
    _color:purple; /*IE6浏览器*/
}

 

在IE6环境下,如果遇到一个模块层里的任何元素只有一执行JS代码改变其CSS,就导致整个模块消失的情况,而在其他浏览器下都正常。

那么可以看看是不是大布局框架用了table搭建,而内部其他布局却用了DIV,如果是的话,也许这就是导致IE6出现那种情况的原因

IE6就是这么一个无解的东西,要兼容它不容易呐

 

要让弹出层显示在flash之上,可以在<object>标签内添加如下代码:

<param name="wmode" value="opaque" />

 

frameset 元素可定义一个框架集,用来组织多个窗口(框架),在frameset内部定义几个frame,就表示有几个窗口。

可以简单理解为多个iframe的集合(当然,注意frameset的搭配元素是frame)。

它通过 cols 或 rows 属性来决定布局结构,例如:

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>

就是左中右结构,1:2:1比例的3列布局

 

Jquery部分

常常遇到需要Jquery和一些原始JS属性混用的情况,这时候

$("#ID名").get(0).属性

$("#ID名").[0].属性

这样就可以很好的解决这个问题了

 
IE浏览器识别代码:

var agent = navigator.userAgent.toLowerCase(); 
if(agent.indexOf("msie") != -1){
  alert("this is IE");
} 

 

使用Jquery的$方法时,尽可能用ID做索引。如非必要,不要用class做索引,因为其运行速度是最慢的,特别在IE6之下极为明显(IE6的JS运行速度只有Chrome的十分之一)

 

获取浏览器显示区域的高度 : $(window).height();

获取浏览器显示区域的宽度 :$(window).width();

获取页面的文档高度 :$(document).height();

获取页面的文档宽度 :$(document).width();

获取滚动条到顶部的垂直高度 :$(document).scrollTop();

获取滚动条到左边的垂直宽度 :$(document).scrollLeft();

获取某元素的位置 :$(xx).offset().left , $(xx).offset().top

 

Jquery获取父级页面元素的写法是:

$(window.parent.document).find("#ID名")

而传统JS获取父级页面元素的写法是:

window.parent.document.getElementById("ID名")

Jquery获取iframe页面内元素的写法是:

$(window.frames["myFrame"].document).find(selector)

 

JS预加载图片

$(document).ready(function(){
    var img1 = new Image();
    img1.src="图片路径";
});

上面的代码,可以实现在浏览器加载完页面后,预先加载图片。

对于有些会改变背景图的特效而言,把要切换图片预先加载,就可以让特效效果更圆滑

 

JS解析JSON

知道键名的前提下, 获取JSON对象中某个键对应的值的写法

JsonObj.key
JsonObj[key]


JS组合选择器 
$("selectorA selectorB")
介绍 :返回selectorA元素里包含的所有的子孙元素selectorB
 
$("selectorA>selectorB")
介绍 :返回selectorA元素里包含的所有的直接子元素selectorB (不包括孙元素)
 
$("selectorA+selectorB") 
介绍 :返回跟在selectorA元素后面的第一个同级元素selectorB
 
$("selectorA~selectorB") 
介绍 :返回跟在selectorA元素后面的所有同级元素selectorB

注:满足selectorA元素可以不止一个,如:$("div span"),就是所有div里包含的span子元素

你可能感兴趣的:(web前端)