Home > Article > Web Front-end > Compatibility issues (pc css)_html/css_WEB-ITnose
记录平时遇见的兼容性问题,有更好的解决办法希望各位提出,会持续更新
提出时间 | 问题描述 | 解决方案 |
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: | |
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