HTML标签嵌套规则



HTML标签嵌套规则。

  1. body可以直接包含块状元素、ins、del、script。不可以直接包含行内元素
  2. ins和del(行内元素)可以包含块状元素或者行内元素,其他任何行内元素都不允许包含块状元素
  3. p、h1-h6可以直接包含行内元素和文本信息,但是不允许包含块状元素
  4. dl元素只允许包含dt和dd,同时dt不能包含块状元素,只允许包含行内元素,对于dd可以包含任何元素
  5. form元素不能够直接包含input元素。原因在于input元素属于行内元素,form元素仅仅能够包含块状元素
  6. table元素只能够包含caption、colgroup、col、thead、tbod[......]

Read more

DIV+CSS布局与table布局的比较与区别

DIV+CSS布局与table布局的比较与区别。

一、有利于搜索引擎优化
使用table布局去制作页面的时候,通常为了达到一定的视觉效果会套用多层表格。但是蜘蛛搜索页面时,如果遇到多层表格嵌套,会跳过嵌套的内容或直接放弃整个页面。使得蜘蛛不能够抓取到页面的核心,那么这个页面就会被蜘蛛记录为相似页面。如果在一个网站当中出现过多的相似页面,则会对其排名造成一定的影响。
DIV+CSS布局基本上不会存在这样的问题,从技术角度来说,在控制样式时也不需要过多的嵌套。

二、代码精简,提高了加载速度
使用DIV+CSS布局,页面代码精简。加载速度得到很大的提高
对于开发者来说,代码精简,[......]

Read more

input 标签(file类型)在IE和FF里的兼容问题

input 标签(file类型)在IE和FF里的兼容问题,IE,永远都是那么不同……那么特立独行…………
file类型的input标签在IE浏览器以及火狐(FF)浏览器当中,存在着兼容问题,对于宽度的设置,使用的语法并不相同,具体区别如下代码:

<input type=”file” size=”4″ style=”*width:90px;” />

在IE里,浏览器以style中的设置的width控制整个标签的宽度。
在FF里,浏览器以size中的数值控制整个标签的宽度。

注:示例代码中的数值在IE6和FF3中,显示的宽度是相同的。

本文链接地址: input 标[......]

Read more

CSS实现垂直居中的5种方法介绍

CSS实现垂直居中的5种方法介绍。利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。

       使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点。(可以看看测试页面,有简短解释。)

1.jpg

方法一 

这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。

  1. <div id=”wrapper”>
  2. <div i[......]

Read more

IE6 兼容问题 横向双倍外边距

IE6 兼容问题 横向双倍外边距。IE6存在不少的兼容问题,今天要说的是IE6 的 横向双倍外边距

横向双倍外边距的触发条件:

当浮动元素的浮动方向和浮动边界的方向一致。此时用IE6查看网页,就会发现,设置的横向的边距变成了双倍。

如:元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理,元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素,第一个浮动元素会出现这个双边距bug,其它的浮动元素则不会。

那么,如何修正这个IE6下的横向双倍外边距的Bug呢?

只需要给浮动元素加上display:inline;的CSS属性就可以了。[......]

Read more

浮动元素的性质

浮动元素的性质。

  1. 浮动元素会脱离正常的文档流,按照其外边距指定的位置相对于它的上一个块级元素(或父元素)显示
  2. 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐,但是边框和背景却忽略浮动元素而向上一个(实例中为父元素)任意非浮动元素靠齐
  3. 浮动元素后面的内联元素会向此浮动元素的外边距靠齐

浮动元素会脱离正常的文档流,按照其外边距指定的位置相对于它的上一个块级元素(或父元素)显示

<!DOCTYPE HTML >
<html>
<head>
<meta charset=’utf-8′/>
<title>[......]

Read more

CSS reset重置CSS重置代码实例

CSS reset重置CSS重置代码.

html{font-family:”微软雅黑”,Arial,sans-serif}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,button,textarea,p,th,td{padding:0;margin:0;font-family:Microsoft YaHei,sans-serif,Arial}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
a{tex[......]

Read more

IE6 BUG图片元素img下高度超出出现多余空白

IE6 BUG图片元素img下高度超出出现多余空白怎么解决?

1、将图片转换为块级对象
即,设置img为“display:block;”。

2、设置图片的垂直对齐方式
即设置图片的vertical-align属性为“top,text-top,bottom,text-bottom”也可以解决。

3、设置父对象的文字大小为0px
即,在代码中添加一行:“font-size:0;”可以解决问题。但这也引发了新的问题,在父对象中的文字都无法显示。就算文字部分被子对象括起来,设置子对象文字大小依然可以显示,但在CSS效验的时候会提示文字过小的错误。

4、改变父对象的属性[......]

Read more

IE6 浏览器常见兼容23个问题大汇总

IE6 浏览器常见兼容23个问题大汇总。综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼容各个浏览器,依然是不得不面对的工作。

在此总结了常见的浏览器兼容问题,里面也有IE6的常见兼容问题,供大家分享。

如需转载,请注明出处:网易博客-独行冰海:IE6 浏览器常见兼容问题 大汇总
1.<!DOCTYPE HTML>文档类型的声明。

产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象;

解决办法:书写文档声明。[......]

Read more