幻想曲.Net » css

css hack (2)

幻想曲 — Wed, 30 Apr 2008 06:24:00 +0000

_property:value
属性前加_线,该hack对IE有效，在FF下无效
这段代码在IE下看,div的边框为蓝色,而在FireFox下无效

<br />
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br />
<html xmlns=”http://www.w3.org/1999/xhtml”><br />
 <head><br />
  <title> new document </title><br />
  <meta name=”generator” content=”editplus” /><br />
  <meta name=”author” content=”" /><br />
  <meta name=”keywords” content=”" /><br />
  <meta name=”description” content=”" /><br />
  <style type=”text/css”><br />
  div<br />
  {<br />
_border:solid 1px blue;<br />
width:300px;<br />
height:300px;<br />
  }<br />
  </style><br />
 </head></p>
<p> <body><br />
  <div>yibin.us</div><br />
 </body><br />
</html><br />

运行代码

盒模型解决方法
选择符 {width:IE5.x宽度; voice-family :”\”}\”"; voice-family:inherit; width:正确宽度;}
IE5.5及以下版本不认,其它版本与FF都认
如下，该段代码在FF与IE6/IE7能正确显示div宽度为200px

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br />
<html xmlns=”http://www.w3.org/1999/xhtml”><br />
 <head><br />
  <title> new document </title><br />
  <meta name=”generator” content=”editplus” /><br />
  <meta name=”author” content=”" /><br />
  <meta name=”keywords” content=”" /><br />
  <meta name=”description” content=”" /><br />
  <style type=”text/css”><br />
  div<br />
  {<br />
border:solid 1px blue;<br />
width:900px;<br />
voice-family :”\”}\”";<br />
voice-family:inherit;<br />
width:200px;</p>
<p>  }<br />
  </style><br />
 </head></p>
<p> <body><br />
  <div>yibin.us</div><br />
 </body><br />
</html><br />

运行代码

CSS Hack(1)

幻想曲 — Wed, 30 Apr 2008 02:02:00 +0000

!important;
严格来说，!important;应该不能算作是一种hack技术，被应用了!important;的属性将在IE中无效，对FF有效。
如以下这段，在FF中div1的背景将是红色,而在IE中却是蓝色

<br />
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br />
<html xmlns=”http://www.w3.org/1999/xhtml”><br />
 <head><br />
  <title> new document </title><br />
  <meta name=”generator” content=”editplus” /><br />
  <meta name=”author” content=”" /><br />
  <meta name=”keywords” content=”" /><br />
  <meta name=”description” content=”" /><br />
  <style type=”text/css”><br />
   #div1<br />
   {<br />
     background:red !important;<br />
     background:blue;<br />
   }<br />
  </style><br />
 </head></p>
<p> <body><br />
  <div id=”div1″>div1</div><br />
 </body><br />
</html><br />

运行代码

* html 选择符 {…}
IE6及以下版本识别，对FF无效

<br />
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br />
<html xmlns=”http://www.w3.org/1999/xhtml”><br />
 <head><br />
  <title> new document </title><br />
  <meta name=”generator” content=”editplus” /><br />
  <meta name=”author” content=”" /><br />
  <meta name=”keywords” content=”" /><br />
  <meta name=”description” content=”" /><br />
  <style type=”text/css”></p>
<p>   #more<br />
   {<br />
   border:solid 1px blue;<br />
   }<br />
  * html #more<br />
  {<br />
    border:solid 1px red;<br />
  }<br />
  </style><br />
 </head><br />
 <body><br />
  <div id=”more”>asdf</div><br />
 </body><br />
</html><br />

运行代码

select { 属性 /*屏蔽IE6*/:值;},仅IE6不识别，屏蔽IE6
主要是通过css的注释/*…..*/分开一个属性值与值，来屏蔽IE6

——————-华丽的分隔符——————————
现在我对前端充满好奇与兴趣，打算转到前端了哈。

position:fixed?

幻想曲 — Tue, 29 Apr 2008 13:01:00 +0000

position:fixed在ie6及以下版本下不大好用
firefox运行:

<br />
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br />
<html xmlns=”http://www.w3.org/1999/xhtml”><br />
 <head><br />
  <title> new document </title><br />
  <meta name=”generator” content=”editplus” /><br />
  <meta name=”author” content=”" /><br />
  <meta name=”keywords” content=”" /><br />
  <meta name=”description” content=”" /><br />
  <style type=”text/css”><br />
  p<br />
  {<br />
  height:100px;<br />
  }<br />
  </style><br />
 </head></p>
<p> <body><br />
 <p></p><br />
  <p></p><br />
   <p></p><br />
    <p></p><br />
	 <p></p><br />
	  <p></p><br />
	   <p></p><br />
	    <p></p><br />
		 <p></p><br />
		  <p></p><br />
		   <p></p><br />
		    <p></p><br />
			 <p></p><br />
  <div style=”position:fixed;right:3px;bottom:3px;”></div><br />
 </body><br />
</html><br />

运行代码

于是用js来解决

<br />
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br />
<html xmlns=”http://www.w3.org/1999/xhtml”><br />
 <head><br />
  <title> new document </title><br />
  <meta name=”generator” content=”editplus” /><br />
  <meta name=”author” content=”" /><br />
  <meta name=”keywords” content=”" /><br />
  <meta name=”description” content=”" /><br />
 </head></p>
<p> <body><br />
  <div id=”test” style=”position:absolute;z-index:99;width:200px;text-align:right;”><br />
<br />
</div></p>
<p><script type=”text/javascript”><br />
var img = document.getElementById(‘test’);<br />
function test(){<br />
	img.style.top = (document.documentElement.clientHeight – img.offsetHeight + document.documentElement.scrollTop) + ‘px’;<br />
	img.style.left = document.documentElement.clientWidth – img.offsetWidth + document.documentElement.scrollLeft + ‘px’;<br />
}<br />
setInterval(test, 250);<br />
</script><br />
 </body><br />
</html><br />

运行代码