更新FF后,发现之前项目里的样式有比较大的问题,其实也算不上是更新后的问题,之前也存在只是现在更为明显些。后想想算了,找时间重构吧。
问题是这样,IE和FF里使用锁头的TABLE,代码不能很好的统一,CSS和JS都这样。后来网上找了资料,对问题进行了改进。
使用css固定表头,并结合JS让表格自适应高度
简单的表格,含thead和tbody
<div class="wzjGridTable">
<table cellpadding="0" cellspacing="0" border="0" id="tabClient">
<thead class="gridHeader">
<tr>
<td>标题</td>
</tr>
</thead>
<tbody class="gridContent">
<tr>
<td>内容</td>
</tr>
</tbody>
</table>
</div>
/*CSS*/
div.wzjGridTable{
position:absolute;
width:100%;
height:100%;
overflow:hidden;
_overflow-y:auto;
}
div.wzjGridTable table{
width:100%;
overflow:auto;
background:#FFFFFF;
}
div.wzjGridTable thead.gridHeader tr{
position: relative;
TOP: expression(this.offsetParent.scrollTop-1);
}
//js
if(navigator.appName.indexOf("Microsoft")!=-1){
setTableHeight_IE()
(window).bind("resize",function(){
setTableHeight_IE()
});
}else{
setTableHeight_FF()
window.onresize = setTableHeight_FF
}
function setTableHeight_FF(){
var titleHead=getHeight($(".toolbarDiv").css("height"))
var tool=getHeight($(".winTitle").css("height"))
var tabHead=getHeight($(".gridHeader").css("height"))
var finalH=document.body.clientHeight-titleHead-tool-tabHead;
$("#tabClient").css("height",finalH)
}
function setTableHeight_IE(){
var tabHead=getHeight($(".gridHeader tr td").css("height"))
var finalH=document.body.clientHeight-tabHead-tabHead;
$("div.wzjGridTable").css("height",finalH)
}
分享到:
相关推荐
- `window.resizeTo()`和`window.resizeBy()`:这两个方法在调整浏览器窗口大小时,IE和FF的处理方式有差异。 4. 事件处理: - `event`对象:在IE中,事件对象作为全局对象,而在FF中,事件对象作为函数参数传递...
10. **BOM(浏览器对象模型)**:IE的BOM对象如`window`、`document`的一些属性和方法与其他浏览器有差异,例如`window.innerWidth`、`window.resizeTo`等。 文件名“代码整理的一些规范”可能包含了开发实践中的...
标题“兼容ie,FF,chrome,opera的弹出层居中js”所指的就是一个JavaScript实现的弹出层(popup layer)定位代码,它能在Internet Explorer(IE)、Firefox(FF)、Chrome以及Opera这些主流浏览器中实现居中显示。...
在标签中提到的“DOM window.resize 事件”是本次讨论的核心内容,即文档对象模型(DOM)在IE特定版本中对window.resize事件的响应情况,这可能与现代浏览器,如FF(Firefox)和Chrome的表现有所不同。 从【部分...
如果希望查看器适应不同屏幕尺寸,可以使用媒体查询(Media Queries)或监听`resize`事件来调整图片大小和div容器。 8. **性能优化**: 当图片很大时,频繁缩放和平移可能导致性能问题。可以考虑使用CSS3的`...
4. **兼容性**:考虑到浏览器的多样性,开发人员需要确保代码在主流浏览器如Internet Explorer(IE)、Firefox(FF)和Chrome上都能正常工作。这可能需要使用jQuery的跨浏览器兼容性特性,以及针对旧版IE可能存在的...
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要...
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#ff0000', endColorstr='#00ff00'); ``` **知识点解释:** 使用CSS的`filter`属性,结合特定的IE滤镜,可以为页面元素添加各种视觉效果,如...
jQuery弹出层,通常被称为模态对话框或浮动窗口,是在网页主界面之上显示一个半透明或全透明的遮罩层,以及一个独立的窗口,用于展示详细信息、警告提示、表单输入等。这种设计可以避免用户在处理当前任务时被其他...
而且,从现代Web开发的角度看,使用VBScript和ActiveX控件并不是推荐的实践,因为这些技术已经过时,而且它们的安全风险较高,更不在其他现代浏览器的支持范围之内。 此外,现代浏览器出于安全和用户体验的考虑,...
<body onload="top.resizeTo(300, 200);"> (300, 200);"> ``` 第一段代码用于调整窗口的大小,第二段代码则用于移动窗口的位置。这对于需要精确控制窗口显示的场景非常有用。 ### 20. 禁用滚动条 ```html ``` ...
jQuery.nicescroll致力于提供良好的跨浏览器兼容性,支持现代浏览器如Chrome、Firefox、Safari、Edge以及IE8+。不过,需要注意的是,由于滚动条样式是由JavaScript动态生成,所以性能可能会受到一定的影响,尤其是在...
给tr设置relative后就能相对table定位了,看来很简单啊,但问题是这个方法ie8和ff都无效,而且存在很多问题,所以很快就被抛弃了。 ps:该效果用来做tr的拖动会很方便。 接着想到的是给table插入一个新tr,克隆原来...
<body onload="window.resizeTo(window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4)"> 无关闭按钮IE window.open("aa.htm", "meizz", "fullscreen=7"); 统一编码/解码 alert...
//document.writeln ('<dd>06月21日 修复IE6下兼容问题</dd>'); //document.writeln ('<dd>06月01日 懒人图库2012新版上线</dd>'); //document.writeln ('<dd>05月26日 新增北方网通服务器</dd>'); //document....