Compatibility issues (pc css)_html/css_WEB-ITnose-HTML Tutorial-php.cn

Compatibility issues (pc css)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:47:36

Original

1140 people have browsed it

记录平时遇见的兼容性问题，有更好的解决办法希望各位提出，会持续更新

提出时间	问题描述	解决方案
2014/7/15	table下面使用img或者其他元素例如embed会产生,对应的空隙,假如使用文字缺不会发生上述问题.	方法1:可以使用怪异模式进行解析html,不建议(把!doctypehtml去掉方法2:设置对应的元素的css;设置为块状元素或者浮动,具体帖子http://blog.csdn.net/fgdfgasd/article/details/7979763
2014/7/15	ie不支持tr设置background	使用td设置background(不推荐),使用css把tr设置background来的方便
	为什么FF下文本无法撑开容器的高度	标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的, 办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:{height:auto!important;height:200px;min-height:200px;}
	怎么样才能让层显示在FLASH之上呢	FLASH设置透明解决的办法是给FLASH设置透明或者
	为什么web标准中IE无法设置滚动条颜色了	将body换成html,去掉doctype声明,进入怪异模式
	超链接访问过后hover样式就不出现的问题	被点击访问过的超链接样式不在具有hover和active了,改变CSS属性的排列顺序:L-V-H-Aa:link,a:visited,a:hover,a:active{}
	ie6中超链接加入边框显示不全	加入display:block,变为块状元素;zoom:1
	ie6元素存在确不显示出来	父亲元素添加 overflow:hidden;zoom:1; ie6下浮动及绝对定位元素莫名消失的问题在最后加入一个清浮动的div（CSS:.clear{clear:both;height:0;overflow:hidden;}HTML:），在绝对定位的元素前加入一个空divhttp://blog.163.com/hongshaoguoguo@126/blog/static/1804698120127934226128/
2014/9/26	Variable width horizontally centered (paging Commonly used)	Use positioning parent element relative> Container element absoluteleft:50%> Target element relativeleft:-50% (or right: 50%) The exploit is a positioning vulnerability implementation
2014/10/15	display:inline-block elements cannot be on the same horizontal line and cannot be adjusted using marginpadding	Set adjacent elements to vertical-align:top Align the top of the image and use -px to fine-tune the image
2014/9/27	Hover has no effect when margin: -1px, setting z-index does not work	Use position:relative to display hover stuff
2014/10/16	Realize full screen layer with custom width	Use position:absolute to make it float, left:0top:0 and then use margin-left:-half the width of the image
2014/10/24	After setting the border in thead in the table, the tbody has no border. Call js to hide and display the element. Firefox tbody will render the border	The default is td with a background color border, switch the border
2014/10/24	line-height has an impact on typesetting, (Google has an impact, after float:left, leave blank on the left	Because the child elements are Inheriting the line-height of the parent element may cause problems due to browser parsing. It is ideal to use line-height of 1 or normal when initializing, so the solution is to set the line-height of the corresponding element to normal. Or change the font size to a smaller size, because line-height:1.5font-size:10px; is equivalent to line-height:15px; in fact, changing the line-height achieves the effect. Changing the font will cause some layout changes. It is not recommended. http://www .zhangyunling.com/?p=21
2014/10/30	The input box and the image are not on a horizontal line, vertical-align:middle, in different browsers The interpretation in the browser is different (ie7-8) and there will be misalignment	Using vertical-align:top the browser has the same interpretation, but it should be noted that the height of the image and the height of the input box should be similar
2014/10/30	The server’s rendering css will be displaced
2014/11/3	ie6 cannot load css with different encodings	Modify css encoding
2014/11/3	ie6 for floating The div has no fixed width, and there will be a right floating line break	For the left floating div, add a corresponding width
2014/11/4	The difference between div and section	section is more semantic and suitable for article segmentation and partial content differentiation. However, it is more recommended to use div
if you are just using styles. 2014/11/7	The absolute positioning of the lower left part of ie6 fails because the parent element does not add width and height	Using zoom:1 to trigger layout or adding height or width to the parent element can solve the problem
2014/11/8	Character line break	Use word-wrap:break-word under IE; everything is normal. Generally, word-wrap:break-word;word-break:break-all; results in long strings of English and English words being disconnected. Use: overflow:auto;ie, long strings will automatically wrap. ff, long strings will be covered. word-wrap:break-word;overflow:hidden;
2014/12/25	Text-align left and right	text-align :justify!important;// text-justify:distribute-all-lines;//Implemented for ie
2014/12/25	ie6- 7 Trigger inline-block	.classify_item{display:inline-block;width:592px;height:400px;} .classify_item_ie{display:inline} liclass="classify_itemclassify_item_ie" display:inline-block; display:inline; *zoom:1;
2015/1/4	In In IE6, when text and img, input, textarea, select, object and other objects are in the same container, the line-height attribute is invalid. The line-height attribute is only valid for full text.	Add in the style of one of the non-text objects: margin: (line-height of the container - the height of the object itself)/2px0; vertical-align:middle;
2015/1/5	clearfix clearing the float will automatically render the height	External elements set overflow:hidden;
2015/1/5	ie6-7overflow:hidden is invalid	Even if the parent element has overflow:hidden set. It is very simple to solve this bug. Use position:relative; in the parent element to solve the bug
2015/1/6	ie6-7li nested ul exists padding	Add *zoom in ul's father li: 1 to trigger haslayout
2015/1/12	iecss3htc path.iecss{behavior: url(htc/pie.htc);}	The path is the root directory path of the project. When calling css, you do not need to use ../htc/pie.htc, just htc/pie.htc.
2015/1/14	Under ie6, under position:relative, use js interaction, margin-left will disappear	Use padding, use js to redraw , (Add a style to force re-rendering)
2015/1/14	ie6-7 The parent element sets overflow:hidden, and the child element is set to position :relative is invalid	The parent element sets position:relative
2015/3/5	The first element in the second row of the floating element under ie7 will Line break	Floating elements must define a height otherwise the automatic height parsing will be incorrect
2015/3/5	Display of the a tag below li under ie7: There is a gap between block and li	a label height:100% width:100%;
2015/3/17	123\|123 this kind Effect margin-left: -1 Outermost layer overflow: hidden is invalid	The corresponding layer must be a block, block or inline-block to take effect
2015/3/19	The first element of the second row of the dl floating list was exploded under ie7	ie7 needs to define a height
2015/3/21	The last floating element in ie7 will wrap	You need to force the element not to wrap white-space:nowrap;

Please keep the original address for reprinting, thank you