跨浏览器兼容性与交互性实践-优快云博客

为了应付数字媒体实践小学期，用两三天的时间匆匆忙忙地架起来一个PHP网站。网站很撮，老师给的分数让它看起来更撮。

做这个网站的那段时间正好在看Brooks的那本旷世经典《人月神话》，了解了其中的“The Surgical

Team”的开发模式，觉得在特殊场合下，这种开发模式确实会拥有极高的开发效率和团队战斗力。

以下说说在这个网站的开发过程中的一些收获吧。

一：Firefox3.5上网页的居中问题
目前很多网站都没解决在Firefox3.5上面不能将网页居中的问题，经过Google发现这个问题其实真的很easy，只需利用CSS技术，将整个网页中最底层“盒子”的CSS设为以下形式：
#layer0
{
width:800px; height:779px;
text-align:left;
background-image:url(../images/background.gif);
/*background-color:#F8F8F8;*/
margin:0px auto;
}

其中margin:0px auto;正是将该层居中的关键所在。

二：IE8和Firefox3.5等浏览器在“层”布局时所存在的问题
IE8和Firefox3.5在对层布局时的解析上会存在少许差异，因此会造成一些在高度、宽度的显示上存在的差异，对于不同的浏览器我使用了不同的CSS样式表：
<link rel="stylesheet" type="text/css" href="../css/mycss2.css">
<link type="text/css" href="../css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />

附：用CSS判断浏览器的类型

lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同

附：用Javascript代码实现判断浏览器的类型：

IE 中的Windows对象独有ActiveXObject函数。

Firefox 中的DOM元素独有getBoxObjectFor函数。

Opera 中独有的浏览器标记window.opera属性。

Safari 中独有的openDatabase函数。

Google Chrome 和Firefox共有MessageEvent函数，但是Chrome中没有getBoxObjectFor函数（在Chrome2.0版本中测试不成功）。

< script type ="text/javascript" >
         var SysType;

         if (window.ActiveXObject)
            SysType = "Internet Explorer";
         else if (document.getBoxObjectFor)
            SysType = "Firefox";
        else if (window.opera)
           SysType = "Opera";

else if (window.openDatabase)
SysType = "Safari";

        else if (window.MessageEvent && ! document.getBoxObjectFor)
            SysType = "Google Chrome";

alert( SysType );

</ script >

PS:另外什么360，傲游，世界之窗之类的浏览器弹出的窗口显示的都是“Internet Explorer”，这当然是用了别人IE内核的表现。

三：用户在注册填写表单时，可以看见相应表单给出的实时提示，使用户和网站拥有良好的交互性。

HTML代码：
<tr>
<td><label class="login" for="user_name">用户名:</label></td>
7
<td><input type="text" name="user_name" id="user_name" style="width:150px;" onfocus="display('user_name_layer')" onblur="hide('user_name_layer')"/></td>
<td><span id="user_name_layer" style="display:none; float:left;">请填写您的真实姓名!</span></td>
</tr>
CSS代码：
style="display:none; float:left;"
Javascript代码：
function display( area )
{
var obj = document.getElementById(area);
obj.style.display = 'block';
}
function hide( area )
{
var obj = document.getElementById(area);
obj.style.display = 'none';
}

PHP撮网站一个