css 适配性撰写纪录

日期:2021-03-12 类型:科技新闻 

关键词:小程序开发者工具,小程序在线生成平台,小程序编辑,免费的小程序,微信小程序在哪里

从网页页面刚开始合理布局设计方案初就考虑到到各个访问器的难题,留出充裕的余量和给各个访问器留出充裕的充分发挥室内空间,这样的网页页面适配性才是最好是的。
  下面就来几个难题:
  1、div border不可以显示信息
  难题叙述:用1个div A层正中间放了几个div B来储放內容,由于內容是不固定不动的,因而就应用了对B层应用了float,让A层自融入高宽比,后边对A层再加边框,在ie中能显示信息,可是在firefox中就自始至终无法显示信息。
  难题剖析:B层应用了float,部位浮起,A层边框不可以显示信息
  处理计划方案:对A刚开始应用1个波动消除<div style="clear:both"></div>

  2、cms ie6的內容网页页面不可以所有显示信息
  难题叙述:cms內容页中ie6能显示信息一部分的內容,在别的访问器中显示信息能一切正常所有显示信息
  难题剖析:查询编码,在其中有.content{height:auto !importan;height:500px;min-height:500px;},应当是合理布局是以便漂亮,留下了500px的高宽比,实际上內容页自融入便可以了,在ie6中的min-height是兼容问题的因而便是固定不动高宽比500px,超过后也不可以显示信息了。
  处理法令:.content{height:auto;}高宽比自融入

  3、有关margin和padding撑破外层div的难题
  难题叙述:应用div margin padding 合理布局,总体架构设置号,刚开始加上內容时应用了margin padding对內容精准定位,最后在ie6中将全部div撑破,排版打乱
  难题剖析:ie6正中间margin+padding+border+height(width)=盒子的具体规格,因而刚开始设计方案的规格再加精准定位的margin和padding就致使了撑破div
  处理计划方案:精准定位改成position精准定位,应用position="relative"相对自身原部位精准定位,本身部位保存,邻近div借助原部位,精准定位能够把原先margin和padding多撑出部位重合在1起,多出重合一部分无內容对客户体验上无危害。
 
  4、应用jquery slidetoggle 出現闪动难题
  难题叙述:应用jquery slidetoggle ie6和ie7出現闪动难题
  难题剖析:搜索材料 对slidetoggle 的子元素应用了position:relative position:absolute 等出現闪动,自查缘故应用了float:left出現闪动
  处理计划方案:处理计划方案:加上上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">则能够处理难题,可是本句话前不可以有别的注解,刚开始未能处理时由于在网页页面的刚开始有了1个空注解(如难题5中),当难题5处理了,后边反思,得出了这个计划方案。
      实际上前面在网络上也查了有关材料,处理法令更是这般,可是因为前面有1个空注解,因此沒有出現实际效果,后边把空注解处理了,才恍然觉悟。
  
  5、静态数据页合理布局适配绝大多数访问器,再加动态性数据信息后在ie6 和 ie7中垂直居中的內容就偏左了
  难题叙述:做静态数据页合理布局时,很是细心,由于了解无需css hack的合理布局做出来的适配性才是最好是的,因而很是细心的做完,检测了各个访问器,适配性也很好,但再加数据信息后就出現偏位了。
  难题剖析:历经再3的坚持不懈,发现,在輸出数据信息时,网页页面的头顶部多了1个<!---->空注解,因而就偏位了。
  处理计划方案:除去网页页面刚开始的<!---->

  6、应用jquery slidetoggle是子元素出現快于父元素出現和消退,但往下拉还未进行,子元素出現1闪出現,给人以突兀的觉得

  难题叙述:应用了jquery slidetoggle 元素下一开始下来是,子元素则1闪而现,即1点一下则出現,很是突兀
  难题剖析:历经搜索,发现是子元素应用了position:relative的缘故导致
  处理法令:除去子元素中position:relative 的特性