重构页面遇到的各种奇怪问题

重构

记录一下干货

• 怎样可以很好地保证网页的浏览器兼容性

特定html标签相关的奇怪问题

• textarea

 
  <!--会出现几个空格-->

 <!--换行之后有几个空格-->

chrome下第二个textarea会出现几个空格,第三个textarea会换行再加几个空格,所以最好使用第一个textarea的写法句号 (其他浏览器有空切换到windows测试)

css相关的奇怪问题

行内块元素之间的奇怪间隔

以span为例(设置了display:inline-block)

左图出现奇怪的间距(元素换行之后会有一个换行符),右图是解决之后的状态

奇怪的间距

清除了边距

解决方法

1. 把行内块元素写一在同一行 (不推荐,如果元素多的话太长了,可读性差)

2. 加注释(推荐)

3. 用浮动(不推荐,脱离文本流了,弄起来有点麻烦)

height:100%的问题

height:100%不起作用

  
    

      

        想让这个div高度为 100% 。但是不能实现
      
    
  

height:100%这个可以看做是继承的,div没有向上继承过来的height:100%,所以不可以实现height:100%;

正确的姿势是这样的(记得内联元素最好要放外部文件哦):

  
    

      

        这样这个div的高度就会100%了
      
    
  

height:100%之后出现滚动条

未完待续...