IE兼容【彩民之家高手论坛】

2019-09-19 05:12 来源:未知

响应式设计的5个CSS实用技巧

2012/05/26 · CSS · 1 评论 · CSS

英文原文:5 Useful CSS Tricks for Responsive Design ,翻译:Viven Chen

正如我在教程响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了。现在我分享在编码时常用的五个CSS技巧并举例说明。这些技巧都是使用简单的CSS属性,如min-width、max-width、overflow 和相对属性值,但是这些属性在响应式设计中发挥着很大的作用。

1. 响应式Video (demo)

响应式video的CSS技巧是由tjkdesign.com发现的。我之前的一篇文章介绍过它,你可以在这里阅读。响应式视频会适应它的容器宽度。

CSS

.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
 
.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

2. Min & Max Width (demo)

属性设置了元素的最大宽度。其目的是防止元素“越线”。

最大宽度容器

在下面的例子当中,我定义了container的宽度是800px(译注:如果它的父容器不小于800px),但是不超过父容器的90%。

CSS

.container { width: 800px; max-width: 90%; }

1
2
3
4
.container {
    width: 800px;
    max-width: 90%;
}

CSS

<strong>响应式图片</strong>

1
<strong>响应式图片</strong>

使用max-width:100% and height:auto,图片能自适应父容器的宽度。

CSS

img { max-width: 100%; height: auto; }

1
2
3
4
img {
    max-width: 100%;
    height: auto;
}

上述的CSS在IE7和IE9都能起作用,但是IE8不识别。可以使用width:auto来修复。你可以使用针对IE8的条件CSS,或者使用下面的IE hack:

CSS

@media \0screen { img { width: auto; /* for ie 8 */ } }

1
2
3
4
5
@media \0screen {
  img {
    width: auto; /* for ie 8 */
  }
}

Min-Width

相反,它设置了元素的最小宽度。在下面的例子里面,min-width用来定义input的宽度,防止input被拉伸的时候变得过小。

彩民之家高手论坛 1 3. 相对值 (demo) 响应式设计中,使用相对值可以简化CSS和改善布局。下面举例说明。 相对Margin 下面的例子是评论列表,使用相对margin来设置。我用百分比的值而不用绝对的像素值来隔开子列表。下面的截图可以看到,如果用像素来定义,子列表会变得越来越小。 彩民之家高手论坛 2 相对字体大小 以相对值(如em或%)设置的字体、行高、外边距可以被继承。例如,只要简单地更改父级元素的字体大小,那么它的子元素的字体大小也能随之改变。 彩民之家高手论坛 3 相对内边距 下面的截图说明了相对的百分比边距比绝对的固定像素边距更好。左边的容器体现了使用像素边距的不平衡。右边的容器则体现了对容器空间的充分利用。 彩民之家高手论坛 4 4. Overflow:hidden Trick 技巧 (demo) 如我在之前的文章所说的,可以使用overflow属性来清除浮动。这个技巧很实用。应用overflow:hidden,可以对上一个元素清除浮动,保证当前容器的内容能正常显示。 彩民之家高手论坛 5 5. Word-break (demo) 我之前也说过word-wrap 属性。可以在强制长文本(如长URL链接)换行。

CSS

.break-word { word-wrap: break-word; }

1
2
3
.break-word {
        word-wrap: break-word;
}

彩民之家高手论坛 6

 

 

赞 5 收藏 1 评论

彩民之家高手论坛 7

  1. <link href="media-queries.css" rel="stylesheet" type="text/css">

div>p .content {color:blue;} -->

initial-scale Meta 标签 (iPhone)

解决办法:1.设置 display:inline; 2.利用IE6 hack _margin-left: 实际距离/2px;

复制代码

var container = document.getElementById(elementId);

  1. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  2.     display: block;
  3. }

如果你给链接、按钮用CSS sprites作为背景,你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存,每次触发hover的时候都会重新加载,可以用JavaScript设置IE6缓存这些图片:

  1. <!--[if lt IE 9]>
  2.     <script src=";
  3. <![endif]-->

8.IE6 hasLayout 布局问题

弹性的图片

解决方法:如果父标签是奇数宽度,则子标签也用奇数宽度;如果是父标签偶数宽度,则子标签也用偶数宽度

  1. @media screen and (max-width: 480px) {
  2.     html {
  3.         -webkit-text-size-adjust: none;
  4.     }
  5.     #main-nav a {
  6.         font-size: 90%;
  7.         padding: 10px 8px;
  8.     }
  9. }

27.最大宽度//直接使用ID来改变元素的最大宽度var container = document.getElementById(elementId);container.style.width = (container.clientWidth > (width - 1)) ? width "px" : "auto";//写成函数来运行function setMaxWidth(elementId, width){var container = document.getElementById(elementId);container.style.width = (container.clientWidth > (width - 1)) ? width "px" : "auto";}//函数示例setMaxWidth('container1', 200);setMaxWidth('container2', 500);

可靠的Media Queries Javascript

2)line-height,文本垂直居中差1px

复制代码

23.最小高度

  demo预览地址:

function setMinWidth(elementId, width){

  1. .video embed,
  2. .video object,
  3. .video iframe {
  4.     width: 100%;
  5.     height: auto;
  6. }

13.行标签之间会有一小段空白


var container = document.getElementById('container');

  • html = 禁用文字大小调整。 默认情况,iphone增大了字体大小,这样更便于阅读。你可以使用 -webkit-text-size-adjust: none; 来取消这种设置。
  • main-nav = 字体大小设置为 90%

解决方法:显示设置高度 or 父标签设置_padding-bottom代替子标签的margin-bottom or 再放个标签让父标签浮动,子标签

  • pagewrap = 宽度设置为 95%
  • content = 宽度设置为 60%
  • sidebar = 宽度设置为 30%

3.IE6不支持png格式图片

  使用max-width:100% 和 height:auto,可以让图片变得更加弹性。

10.IE6奇数问题

  为了让图片尺寸变得更为弹性,可以简单的添加 max-width:100% 和 height:auto。这种方式在IE7中正常工作,不能在IE8中工作,需要使用 width:auto9 来解决这个问题。

//函数示例

  1. @media screen and (max-width: 560px) {
  2.     #content {
  3.         width: auto;
  4.         float: none;
  5.     }
  6.     #sidebar {
  7.         width: 100%;
  8.         float: none;
  9.     }
  10. }

29.躲猫猫bug在IE6和IE7下,躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素,如果在他之后有不浮动的内容,并且有一些定义了:hover的链接,当鼠标移到那些链接上时,在IE6下就会触发躲猫猫。解决方法很简单:1.在(那个未浮动的)内容之后添加一个2.触发包含了这些链接的容器的hasLayout,一个简单的方法就是给其定义height:1%;

  这一技巧可以创建自适应的设计,可以根据 viewport 的宽度重写布局的css。

解决方法:line-height设值

  我们可以通过demo查看当前效果。这时我们还没有使用 media queries,调整浏览器宽度,页面布局也不会发生变化。
CSS3 Media Query

4.IE盒模型跟标准盒模型不同,IE下content部分包含padding border,即设置width后,再设置padding等属性,宽度会增加

CSS
  设置html5元素为块状元素

34.横向列表宽度bug如果你使用float:left;把

HTML5.js

5.a标签中如果有button, 在IE下不能跳转到herf链接,而现代浏览器可以,解决:IE下button设置onclick="window.location.href('#'),现代浏览器设置a中href属性即可。199) ? "200px" : "auto";//写成函数来运行function setMaxHeight(elementId, height){var container = document.getElementById(elementId);container.style.height = (container.scrollHeight > (height - 1)) ? height "px" : "auto";}//函数示例setMaxHeight('container1', 200);setMaxHeight('container2', 500);

  在这里我也不会解释css文件的细节。页面主容器“pagewrap”的宽度被设置为980px。header被设置为固定高度160px。“content”的宽度为600px,靠左浮动。“sidebar”宽度设置为280px,靠右浮动。

19.position下的left,bottom错位

  1. <!--[if lt IE 9]>
  2.     <script src=";
  3. <![endif]-->

20.子级中有设置position,则父级overflow失效

复制代码

解决方法:为父级设置position:relative

复制代码

}

  1. <meta name="viewport" content="width=device-width; initial-scale=1.0">

//写成函数来运行

复制代码

3)与父标签的宽度的奇偶不同的居中造成1px的偏离

复制代码

26.最小宽度:同max-height和max-width一样,IE6也不支持min-width。

  IE8和之前的浏览器不支持CSS3 media queries,你可以在页面中添加css3-mediaqueries.js来解决这个问题。

function setMaxHeight(elementId, height){

复制代码

22.IE6背景闪烁

  当viewport小于980px的时候,将会采用下面的规则:

17.li之间会有间距

  你可以通过《HTML5实践 -- CSS3 Media Queries》了解更多信息。

container.style.width = (container.clientWidth < width) ? width "px" : "auto";

复制代码

33.Overflow Bug在IE6/7中,overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。

CSS Media Queries

解决方法:父标签使用overflow:hidden

  1. <div id="pagewrap">
  2.     <header id="header">
  3.         <hgroup>
  4.             <h1 id="site-logo">Demo</h1>
  5.             <h2 id="site-description">Site Description</h2>
  6.         </hgroup>
  7.         <nav>
  8.             <ul id="main-nav">
  9.                 <li><a href="#">Home</a></li>
  10.             </ul>
  11.         </nav>
  12.         <form id="searchform">
  13.             <input type="search">
  14.         </form>
  15.     </header>
  16.    
  17.     <div id="content">
  18.         <article class="post">
  19.             blog post
  20.         </article>
  21.     </div>
  22.    
  23.     <aside id="sidebar">
  24.         <section class="widget">
  25.              widget
  26.         </section>
  27.                         
  28.     </aside>
  29.     <footer id="footer">
  30.         footer
  31.     </footer>
  32.    
  33. </div>

var container = document.getElementById('container');

设置iPhone Viewport 和 Initial Scale

21.CSS选择器区分

  1. .video embed,
  2. .video object,
  3. .video iframe {
  4.     width: 100%;
  5.     height: auto;
  6. }

setMinWidth('container1', 200);

  1. <meta name="viewport" content="width=device-width; initial-scale=1.0">

//写成函数来运行

复制代码

setMinWidth('container2', 500);

  第一次运行

(1)拥有布局的元素不会收缩

  1. <!--[if lt IE 9]>
  2.     <script src=";
  3. <![endif]-->

元素设置浮动且又设置相同方向的外边距时,会产生双倍的margin边距

你可以访问下面的地址,查看更多相关例子: WordPress themes。我设计了如下media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, 和 Wumblr。

setMaxHeight('container1', 200);

  默认情况下,页面容器的宽度是980px,这个尺寸优化了大于1024px的分辨率。Media query用来检查 viewport 宽度,如果小于980px他会变为窄屏显示模式,页面布局将会以流动的宽度代替固定宽度。如果 viewport 小于650px,他会变为mobile显示模式,内容、侧边栏等内容会变为单独列布局方式,他们的宽度占满屏幕宽度。彩民之家高手论坛 8

/* IE6 专用 */

  demo下载地址:

15.左浮元素margin-bottom失效

复制代码

16.img于块元素中,底边多出空白

  下面得css是为了应对小于480px屏幕的情况,iphone横屏的时候就是这个宽度。

6.IE hasLayout引发的IE6显示不正常BUG

  概述

IE6 不支持min-height属性,但它却认为height就是最小高度。解决方法:使用ie6不支持但其余浏览器支持的属性:

css主体结构

container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";

Viewport小于 650px(单列布局)

31.3像素间距bug在IE6中,当文本(或无浮动元素)跟在一个浮动的元素之后,文本和这个浮动元素之间会多出3像素的间隔。给浮动层添加 display:inline 和 -3px 负值margin给中间的内容层定义 margin-right 以纠正-3px

  请注意,我在demo中使用了html5标签,不过IE9之前IE浏览器不支持<header>, <article>, <footer>, <figure>等html5新标签。可以在html文档中添加 html5.js 文件将解决这一问题。

margin- bottom,即(margin-bottom与float不同时作用于一个标签)

复制代码

#container {min-height:200px; height:auto !important; height:200px;}

  1. #pagewrap {
  2.     width: 980px;
  3.     margin: 0 auto;
  4. }
  5. #header {
  6.     height: 160px;
  7. }
  8. #content {
  9.     width: 600px;
  10.     float: left;
  11. }
  12. #sidebar {
  13.     width: 280px;
  14.     float: right;
  15. }
  16. #footer {
  17.     clear: both;
  18. }

(4)在拥有布局的元素之间外边距不叠加

好了,今天的教程到此为止。

解决方法:字体大小设置为偶数或line-height为偶数

Webkit字体大小调整

18.块元素中有文字及右浮动的行元素,行元素换行

  1. img {
  2.     max-width: 100%;
  3.     height: auto;
  4.     width: auto9; /* ie8 */
  5. }

14.标签高度无法小于19px

弹性的内嵌视频

2.IE8及以下不支持CSS3

  下面的语句实现了在iphone中,使用meta标签设置viewport 和 inital scale。

9.IE条件注释<!--[if lt(小)/gt(大) IE 6]>     <![endif]-->

  1. @media screen and (max-width: 980px) {
  2.     #pagewrap {
  3.         width: 95%;
  4.     }
  5.     #content {
  6.         width: 60%;
  7.         padding: 3% 4%;
  8.     }
  9.     #sidebar {
  10.         width: 30%;
  11.     }
  12.     #sidebar .widget {
  13.         padding: 8% 7%;
  14.         margin-bottom: 10px;
  15.     }
  16. }

解决办法:设置height,width等属性可激活该属性,推荐设置zoom:1;

  1. img {
  2.     max-width: 100%;
  3.     height: auto;
  4.     width: auto9; /* ie8 */
  5. }

(6)在滚动时,列表项上的背景图片间歇性的显示和消失

文章来源:

document.execCommand("BackgroundImageCache",false,true);

  包含 Media Queries Javascript文件

(2)布局元素对浮动进行自动清理

  • header = 设置高度为 auto
  • searchform = 重新设置 searchform 的位置 5px top
  • main-nav = 设置位置为 static
  • site-logo = 设置位置为 static
  • site-description = 设置位置为 static
  • content = 设置宽度为 auto (这会使容器宽度变为fullwidth) ,并且摆脱浮动
  • sidebar = 设置宽度为 100%,并且摆脱浮动

解决方法:float: left;

弹性的图片

/* 其他浏览器 */

  创建media query所需的css,然后在页面中添加引用。

IE兼容【彩民之家高手论坛】。//直接使用ID来改变元素的最小宽度

复制代码

setMaxHeight('container2', 500);

  为了使嵌入视频也变得更加弹性,也可以使用上面的方法。但是不知道什么原因,max-width:100% 在safari浏览器中不能正常的在嵌入资源中工作。我们需要使用width:100% 来代替他。

解决方法:为父级(relative层)设置宽高或添加*zoom:1

弹性的嵌入视频

}

彩民之家高手论坛 9

var container = document.getElementById(elementId);

  1. @media screen and (max-width: 650px) {
  2.     #header {
  3.         height: auto;
  4.     }
  5.     #searchform {
  6.         position: absolute;
  7.         top: 5px;
  8.         right: 0;
  9.     }
  10.     #main-nav {
  11.         position: static;
  12.     }
  13.     #site-logo {
  14.         margin: 15px 100px 5px 0;
  15.         position: static;
  16.     }
  17.     #site-description {
  18.         margin: 0 0 15px;
  19.         position: static;
  20.     }
  21.     #IE兼容【彩民之家高手论坛】。content {
  22.         width: auto;
  23.         float: none;
  24.         margin: 20px 0;
  25.     }
  26.     #sidebar {
  27.         width: 100%;
  28.         float: none;
  29.         margin: 0;
  30.     }
  31. }

7.IE6双边距BUG

  1. html {
  2.     -webkit-text-size-adjust: none;
  3. }

解决方法:overflow: hidden;

复制代码

1)字体大小为奇数之边框高度少1px

 HTML代码 

24.最大高度

  tips:使用百分比(%)可以使容器变为不固定的。

25.100% 高度

 更多例子

在IE6下,如果要给元素定义100%高度,必须要明确定义它的父级元素的高度,如果你需要给元素定义满屏的高度,就得先给html和body定义height:100%;

  使用-webkit-text-size-adjust:none,在iphone上禁用字体大小调整。

container.style.width = (container.clientWidth < width) ? "500px" : "auto";

  查看最终的demo,调整浏览器的大小,查看media query 的行为。你也可以使用iPhone, iPad, 新版Blackberry, 和 Android 来查看modile版的效果。彩民之家高手论坛 10

解决方法:padding-top代替line-height居中,或line-height加1或减1

  在开始之前,我们可以查看 最终demo 来查看最终效果。调整你浏览器的大小,我们可以看到页面会根据视窗的大小自动调整布局。

//直接使用ID来改变元素的最大高度

复制代码

(5)在没有布局的块级连接上,单击区域只覆盖文本

  总结

30.绝对定位元素的1像素间距bugIE6下的这个错误是由于进位处理误差造成(IE7已修复),当绝对定位元素的父元素高或宽为奇数时,bottom和right会产生错误。唯一的解决办法就是给父元素定义明确的高宽值,但对于液态布局没有完美的解决方法。

复制代码

12.line-height默认行高bug

Viewport小于 980px(流动布局)

11.内部盒模型超出父级时,父级被撑大

  现在屏幕分辨率的范围很大,从 320px (iPhone) 到 2560px (大型显示器),甚至更大。用户也不只是使用台式电脑访问web站点了,他使用手机、笔记本电脑、平板电脑。所以传统的设置网站宽度为固定值,已经不能满足需要了。web设计需要适应这种新要求,页面布局需要能够根据访问设备的不同分辨率自动进行调整。本教程将会向你介绍,如何使用html5和CSS3 Media Queries完成跨浏览器的响应式设计。

一、CSS1.根据不同浏览器默认设置不同,页面可初始化样式,调整成一致

  默认情况下,iphone的safari浏览器会收缩页面,以适应他的屏幕。下面的语句告诉iphone的safari浏览器,使用设备宽度作为viewport的宽度,并且禁用initial-scale。

解决方法:父级设置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;

  当viewport小于650px的时候,将会采用下面的规则:

container.style.height = (container.scrollHeight > (height - 1)) ? height "px" : "auto";

 在这里,我不会介绍下面html代码中的细节。下面是布局页面的主框架,我们有一个“pagewrap”的容器包装了"header", "content", "sidebar", 和 "footer"。

28.浮动层错位当内容超出外包容器定义的宽度时,在IE6中容器会忽视定义的width值,宽度会错误地随内容宽度增长而增长。浮动层错位问题在IE6下没有真正让人满意的解决方法,虽然可以使用overflow:hidden;或overflow:scroll;来修正, 但hidden容易导致其他一些问题,scroll会破坏设计;JavaScript也没法很好地解决这个问题。所以建议是一定要在布局上避免这个问题发 生,使用一个固定的布局或者控制好内容的宽度(给内层加width)。

最终效果

解决方法:将行元素置于块元素内的文字前

Viewport小于 480px

(3)相对定位的元素没有布局

包含 Media Queries CSS

//函数示例

  可以使用css3-mediaqueries.js来解决浏览器不支持media queries的问题。

IE6不支持子选择器;先针对IE6使用常规申明CSS选择器,然后再用子选择器针对IE7 及其他浏览器。

复制代码

解决方法:float或结构并排(可读性差,不建议)

  下面的css将会把html5的元素(article, aside, figure, header, footer 等)设置为块元素。

.content {color:red;}

复制代码

32.IE下z-index的bug在IE浏览器中,定位元素的z-index层级是相对于各自的父级容器,所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index,有些情况下还需要定义position:relative。

Step 1 Demo

复制代码

  使用width:100% 和 height:auto,可以让内嵌视频变得更加弹性。

TAG标签: 日记本 css
版权声明:本文由彩民之家高手论坛发布于前端知识,转载请注明出处:IE兼容【彩民之家高手论坛】