网站制作应该使用的7个CSS布局
如果你想做像素完美的跨浏览器CSS布局,那么你可能遇到IE的问题。我要强调的7大CSS黑客,网站制作经常使用的像素完美的设计。
1)盒模型的黑客。
盒模型的黑客也曾经是固定的rendering问题在预browsers IE 6,在边境上和padding是都包括在一个width元,20世纪opposed添加到C
padding: 4em; border: 1em solid red; width: 30em; width/**/:/**/ 25em;
2)条件的意见
这些意见是IE only for conditional NOT SUPPORTED模式和他们的任何其他浏览器。for other browsers他们只是普通的意见和therefor是安,他们是安全的使用。
典型的是:the usage is as
<!--[if IE]> Some CssCode<![endif]-->
上述代码适用于Internet Explorer的所有版本,即5.01、5.5和6,但现在网站制作希望将其应用于Internet Explorer的版本,即5.01、5.5和6,因此网站制作将应用以下条件:
<!--[if lte IE 6]> Some Css Code<![endif]-->
完成测试后,网站制作删除所有的文件分隔符,所以主CSS是干净整洁的。然后在条件注释中的文件的头部分调用这个单独的文件。
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie_hacks.css" /><![endif]-->
条件是以下之一:
IE(IE的任何版本)
IE版本(版本比版本少)
LTE IE版本(版本小于或等于版本)
IE版本(仅版本)
GTE的IE版本(大于或等于版本更大的版本)
GT IE版本(版本大于版本)
版本的Internet Explorer,版本通常是5,5.5,6,或者7,你可以在quirksmode阅读更多关于这个的信息。
3)元素的最小宽度和马克斯宽度
IE不理解这个命令,所以网站制作需要一种在这个浏览器中工作的新方法。让网站制作举一个快速的例子,网站制作需要将它应用到带有id =“包装器”的div中:
<wrapper><div id="nav">
Next we create our CSS commands, so as to create a minimum width of 750px:
#wrapper{min-width: 750px;width:expression(document.body.clientWidth < 750? "750px": "auto" );}
你也可能会想这个最小宽度和最大宽度1220px结合750px:
#wrapper{min-width: 750px;max-width: 1220px;width:expression(document.body.clientWidth < 750? "750px" : document.body.clientWidth > 1220? "1220px" : "auto");}
另一种用于没有JavaScript的MIN高度的方法是使用Dustin Diaz的“漂亮的黑客”:
#id{ min-height: 100px; height:auto !important; height:100px; }
4)轻松选择器
大多数CSS黑客处理选择器错误。下面是一个不同的IE版本和选择器的开始列表,它们可以在其中选择元素。所有这些选择器都使用有效的CSS。
IE 6 and below
* html {}
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}
5)无论怎样:盘旋
悬停选择使你有HTML元素冷却效果和表。大多数浏览器都没有问题,除了IE,看看样式表和每个规则的JavaScript。
如果可以跟踪悬停规则,而HTC可以用来改变元素的行为,那么应该可以创建一个允许任何元素悬停的行为。
你可以在这里多读一些。
6)透明的PNG图片
即不太好处理png透明。你会得到一个丑陋的灰色背景的地方,它应该是透明的。网站制作不能只是用GIF,因为没有更高分辨率的图像,很好。所以网站制作需要一个CSS破解来解决这个问题。按照下列步骤,你将被设置:
HTC的脚本和透明GIF will be used to solve this的出路。你可以在这里下载both队列
现在就上传这些文件到你的窗帘选择2 ie.css队列。
添加一个简单的代码到你的ie.css Line of CSS文件:
img.pngfix { behavior: url(pngHack.htc); }
7)stylegala -没有更多的CSS Hacks
Stylegala的方法是检测浏览器版本和服务于不同的CSS规则,不同的用户代理,不使用黑客或条件注释。同时,最终用户或验证器将永远看不到其他浏览器的CSS规则指定比他们使用的是。他使用了一些简单的PHP代码来精确地检测浏览器类型,就像任何CSS破解一样。