表格表单以及一些常见兼容性问题(IE6,7)

这两天主要学习了两方面的内容:表格表单以及一些在IE6,7下的兼容问题

表格表单

1、table 表格;

thead 表格头;tbody 表格主体;

tr 表格行;

th 元素定义表头;td 元素定义表格单元(在一行的为并列关系,从上往下包含)

2、表格样式重置
table{border-collapse:collapse;} 单元格间隙合并

th,td{padding:0;}重置单元格默认填充

3、colspan  属性规定单元格跨可横的列数。         rowspan  属性规定单元格可横跨的行数。

     <td colspan="2"></td>                               <td rowspan="2"></td>

4、表单元素form  <input type="…… " name="" value="" />

text:文本框        password:密码       radio:单选       checkbox:复选       submit:提交       reset:重置       

button:按钮       image:图片       flie:上传       hidden:隐藏

IE6,7下的兼容问题

1、有的H5标签不能识别,例如header、footer等。

解决办法:运用JS定义这些元素名,创建完是内联元素,然后在CSS里让它们以块元素显示display:block;或者直接调用JS插件解决,这是最方便的方法。

2、块元素包含块元素浮动,如果被包含的块元素设置高度,则被包含的块元素会撑满一行,而不是随父元素浮动。

解决办法:被包含的块元素也设置浮动。

3、左右两个块元素,第一个元素左浮动,第二个元素设置margin-left等于第一个元素的width,结果显示并不会紧挨着,会有一条缝隙。

解决办法:如果想紧挨,避免这种写法,可以将margin-left改成float:left。

4、子元素的宽和高度如果大于父元素的话,会导致撑开父元素,严重改变布局。

解决办法:避免子元素宽高大于父元素。

5、display:inline-block不能识别出来。

解决办法:*display:inline;

              *zoom:1;(星号代表只有IE6及以下能识别,转化成内联元素,并触发haslayout)

6、设置高度为1px,但是显示出来最小高度为19px。

解决办法:加上overflow:hidden。

7、当同时设置float:left和margin—left时,元素的外边距会乘以2.

解决办法:*display:inline;转化为内联元素

8、li里的元素都浮动会导致每一行的下方产生4px的空隙。

解决办法:在li中设置*vertical—align:top 垂直方向向上对齐。

9、文字溢出问题

      <style>
          .box {
              width: 300px;
              border: 1px solid red;
              overflow: hidden;
          }
          .left {
              float: left;
          }
         .right {
             float: right;
             width: 298px;
         }
     </style>
 </head>
 <!--
     当浮动元素之间出现内联元素或注释并且宽度与父元素相差3px以内时,会出现多出文字问题
     解决方法:避免出现内联元素或是宽度差大于3px
 -->
 <body>
     <div class="box">
         <div class="left"></div>
         <span></span>
         <div class="right">会多出文字的</div>
     </div>
 </body>

10、子元素大于父元素的宽高时,在父元素加了overflow:hidden也包不住含有position:relative的子元素。

解决办法:让父元素也加上*position:relative。

11、当子级元素定位在父元素的右下角时,如果父级元素的宽高为奇数,定位会出现1px的偏差。

解决办法:尽量避免父级元素为奇数宽高。

12、input标签会留有空隙。

解决办法:让input浮动。

13、input中加背景图片打字超出范围,图片会被挤走。

解决办法:把背景图片加上fixed,也就是固定。


阅读更多
文章标签: IE6\7 兼容问题
上一篇兼容性较好的清除浮动方法以及定位
下一篇经典布局方案之双飞翼布局
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭