pc网站建设哪个好,原网站开发新功能,手机网站建设的背景,可以做英文教师的网站代码兼容、技巧 前端开发中#xff0c;一个头疼的事#xff0c;就是代码的不兼容#xff0c;这里贴出自己在前端开发中的一些解决经验。除了其浏览器本身的BUG外#xff0c;不建议使用CSS hack来解决兼容性问题的。 IE和FF下对”li“的的高度解析不同 可以不定义高度#… 代码兼容、技巧 前端开发中一个头疼的事就是代码的不兼容这里贴出自己在前端开发中的一些解决经验。除了其浏览器本身的BUG外不建议使用CSS hack来解决兼容性问题的。 IE和FF下对”li“的的高度解析不同 可以不定义高度直接定义行高。再让li浮动 消除IE的BUG。 IE3像素问题 出现3培训BUG 时 可以采用右边层margin-right: -3px; 解决。 需要图片在层中是垂直居中 当需要图片在层中是垂直居中可以图片定义vertical-align: middle;再在图片左侧加入span/span定义样式display: inline-block; height: 100%; vertical-align: middle; 就是兼容的了。 子元素浮动,父元素不能自动适应高度 FF IE7下可以在父元素定义overflow: auto; IE6加入 zoom: 1; 这个触发IE的.layout。或在浮动元素后加入在浮动层后面加入br clearall styleline-height: 0 /。 IE6双边距 浮动元素的外边距会加倍但与第一个浮动元素相邻的其他浮动元素外边距不会加倍。解决方法在此浮动元素增加样式 display:inline; IE下图片产生的间隙 父元素直接包含img这个图片下方会和父元素边缘产生间隙。 解绝方法1.在源代码中让/div 和img在同一行因为那个间隙是由换行符产生的。2.给img添加样式 display:block; IE下高度低于14像素时问题 块元素最小高度为10px当高度定义小于14px时仍为12px 左右; 解决方法为此块元素添加样式 overflow:hidden; 或font-size: 0; IEFF下列表的li为浮动则列表后面的元素不能换行的问题 解决方法为这个ul定义合适的高或给包含这个ul 的父div定义合适的高。或加上br clearall styleline-height: 0 / IE,FF下子元素的上下外边界问题 IE6子元素的上边距和父元素的上内边距叠加。FF子元素的上边距和父元素的上内边距相加。解决方法1、给父元素定义内边距。2、父元素设置边框子元素定义上外边距。3、父元素定义overflow: hidden;子元素定义上外边距。 IE,FF高度自适应问题最小高度 在IE6下子元素的高度能够撑开父元素但FFIE7下不可以。解决办法父元素定义min-height:高度值; height:auto !important; height:高度值; 要注意先后顺序不能错 IE,FF高度自适应问题最大高度最小宽度最大宽度 最大高度max-height: 180px; _height: expression( this.scrollHeight 180 ? 180px : auto ); 后面两条是解决IE6问题。 最小宽度min-width: 900px; _width:expression((document.documentElement.clientWidth||document.body.clientWidth)900?900px:); 最大宽度max-width: 300px; _width:expression((document.documentElement.clientWidth||document.body.clientWidth)300?300px:); 子元素负边距问题 IE6超出父元素的部分会被父元素覆盖。FF分两种情况当父元素有边框或内边距时超出父元素的部分会覆盖父元素没有时父元素拥有负边距。解决方法子元素定义相对定位。 IE6诡异的奇数BUG 当父元素相对定位子元素绝对定位时倘若父元素的高或宽的数值是奇数那么IE6下绝对位置会出错。解决方法 数值改成偶数IE6是大侠只要服从它。 IE6和IE7下相对定位元素不能滚动的Bug 这个BUG以前没遇到过近期配合自动滚屏时遇到了开始以为是JS问题在哪找啊找后来无果尝试看看是不是CSS的问题果不其然万 恶的IE6,7当设置了position: relative后其元素就不能滚动了要想解决其BUG需要使其包裹他们的父元素也相对定位这个时候IE7可以完美解决IE6嘛里面的定位坐 标可能需要实时修正下。 li元素中有右浮动同时此元素还是英文数字 此种情况正常下由于li不清除浮动也不会有影响但是对与Opear,哈哈杯具来了两种方法清除每个li的浮动再就是定义字体为 宋体。究其原因清浮动好理解但是为什么宋体也能解决。不过了这个BUG是Opear的.同时当li浮动后其内部若有inline-block元素 其父元素的行高和高对其不会产生效果这一现象出现在此种情况正常下由于li不清除浮动也不会有影响但是对与Opear input、button在IE下随文字增加内补丁也增加 不管你怎么写margin:0;padding:0;都去不掉唯一的解决办法是overflow:visible。 ul浮动引起的li双倍间距IE6下 大伙听到可能会说这不是IE6的浮动双间距BUG其实不然是的话也就不在这里说了。很困惑让其LI也浮动无果。其他浏览器正常那 该是什么呢退回到原始状态我们已经定义list-style: none; 应该不会有默认的什么产生。查看ulli的基本属性发现有个list-style-position列表项目标记放置在文本以内是否对齐两个值 默认的outside不对其。还有inside对其。那么会不会是他影响。不死心强制定义下list-style-position: outside;哈哈一切变的和谐了既然是默认的IE6啊真实整死人不偿命啊此后我对li的重置里直接加了这条。 IE8下两个inline标签的问题 当我们让两个inline标签在一行且中间没有空格这一般是很正常的写法如label后面跟个span。这个时候倘若只定义行高那问题来了其他解析正常。IE8会多出两个像素。一般解决的话就是两个inline标签换行写.或者给它定义高度。 来自http://www.webfeike.net/d2/content/op_code.htm 转载于:https://www.cnblogs.com/wpbars/p/3401009.html
