웹 프론트엔드 HTML 튜토리얼 兼容性问题(pc css)_html/css_WEB-ITnose

兼容性问题(pc css)_html/css_WEB-ITnose

Jun 24, 2016 am 11:47 AM

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

提出时间 问题描述 解决方案
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 不定宽度水平居中(分页常用) 利用定位父元素relative>容器元素absoluteleft:50%>目标元素relativeleft:-50%(或者right:50%)利用是一个定位的漏洞实现
2014/10/15 display:inline-block元素不能再同一条水平线上,使用marginpadding不能调整 把相邻的元素设置vertical-align:top让其顶部对齐再让图片使用-px进行微调
2014/9/27 margin:-1px的时候hover无效果,设置z-index不行 使用定位position:relative显示出hover的东西
2014/10/16 在定制宽度的实现全屏层 使用定位position:absolute让其浮动起来,left:0top:0再使用margin-left:-图片宽度的一半
2014/10/24 table中thead设置了边框之后,tbody无设置边框,调用js对元素进行隐藏显示操作,火狐tbody会渲染出边框  默认为td加背景色边框,切换换边框
2014/10/24 line-height对于排版有影响,(谷歌有影响,float:left后,左边留空 由于子元素是继承父亲元素的line-height,由于浏览器的解析可能会导致出现问题,比较理想是开始初始化的时候使用line-height为1或者normal,所以解决办法就是把对应的元素的line-height设置为normal或者把字体大小改小,因为line-height:1.5font-size:10px;相当于line-height:15px;其实也是改变line-height达到效果,改字体会导致部分布局改变不推荐http://www.zhangyunling.com/?p=21
2014/10/30 输入框与图像不在一条水平线上,vertical-align:middle,在不同浏览器中解释不一样(ie7-8)会出现不对齐 使用vertical-align:top浏览器解释一样,但是需要注意的是图片的高度和输入框的高度要相近
2014/10/30 服务器的渲染css会出现位移  
2014/11/3 ie6对于编码不一样的css无法加载 修改css编码
2014/11/3 ie6对于浮动的div无定宽度,会出现右浮动换行 对于左浮动的div加上一个对应的宽度
2014/11/4 div和section的区别 section更具有语义,适合使用于文章分段还有部分内容的区别,然而只是单纯使用样式更加建议使用div
2014/11/7 ie6绝对定位左下失效,因为父亲元素无添加宽度和高度 使用zoom:1触发layout或者给父亲元素添加高度或者宽度可以解决
2014/11/8 字符换行  ie下使用word-wrap:break-word;所有的都正常。
一般用word-wrap:break-word;word-break:break-all;导致长串英文和英文单词被断开。用:overflow:auto;ie下,长串会自动折行。ff下,长串会被遮盖。
word-wrap:break-word;overflow:hidden;
2014/12/25 文本左右对齐 text-align:justify!important;//
text-justify:distribute-all-lines;//针对ie实现
2014/12/25 ie6-7触发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 在ie6中,当文字和img、input、textarea、select、object等对象在同一个容器中的时候,line-height属性失效。
只有全文字时,line-height属性才有效。
在其中一个非文字的对象的样式中增加:
margin:(容器的line-height-对象本身的高度)/2px0; 
vertical-align:middle;
2015/1/5 clearfix清除浮动会自动渲染高度 外部元素设置overflow:hidden;
2015/1/5 ie6-7overflow:hidden失效 即使父元素设置了overflow:hidden。
解决这个bug很简单,在父元素中使用position:relative;即可解决该bug
2015/1/6 ie6-7li嵌套ul存在padding 在ul的父亲li里面添加*zoom:1触发haslayout
2015/1/12 iecss3htc路径.iecss{behavior:url(htc/pie.htc);} 路径是项目的根目录路径css调用时候不需要使用../htc/pie.htc直接htc/pie.htc即可
2015/1/14 在ie6下,position:relative下,使用js交互,margin-left会消失 使用padding,使用js进行重绘,(添加样式强制重新渲染样式)
2015/1/14 ie6-7父亲元素设置了overflow:hidden,对设置了子元素为position:relative无效 父亲元素设置position:relative
2015/3/5 ie7下浮动元素第二行第一个元素会换行 浮动元素必须定义一个高度不然自动高度解析不正确
2015/3/5 ie7下li下面a标签display:block与li有间隙 a标签height:100% width:100%;
2015/3/17 123|123这种效果margin-left:-1最外层overflow:hidden无效 对应层必须是块,block或者inline-block才生效
2015/3/19 dl浮动列表在ie7下第二行第一个元素被撑爆 ie7需要定义一个高度
2015/3/21 ie7最后的浮动元素会换行 需要把元素强制不换行white-space:nowrap;

转载请保留原文地址,谢谢

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

See all articles