解决td标签上的position:relative属性在各浏览器中的兼容性问题
在css中的position属性规定了页面元素的定位类型,它有以下几个值:
absolute:绝对定位,相对于static以外的第一个父元素进行定位;
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位;
relative:生成相对定位的元素,相对于其正常位置进行定位;
static:默认值,没有定位;
inherit:继承父元素的position值;
如果一个块A要在块B中进行绝对定位,则我们可以把块A的position值定为absolute,把块B的属性值定为relative,这样,块A就会相对于块B进行绝对定位。
最近在项目中碰到一个这样的问题,table元素的其中一个td的里面会生成一个div,这个div相对于该td进行定位,如下图:
td的position值为relative,div的position值为absolute。这样做在chrome里面没有任何问题,但到了firefox和ie中,就出现问题了,如下图:
在图中可以看到,该td元素的边框没有了。而如果我把td元素的position:relative这个样式给去掉,它又能正常显示了。后来查了些资料,初步估计是td元素和div元素对position:relative样式在各浏览器中的支持和表现形式不一致。解决方法是这样的,在td里面再套一个div元素,这个div元素具有position:relative这个样式。如下图:
然后再换到页面,就会发现这个问题解决了。
解决td标签上的position:relative属性在各浏览器中的兼容性问题的更多相关文章
- CSS中"position:relative"属性与文档流的关系
前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...
- Angular学习笔记 ——input 标签上的【name属性】和【ngModelOptions属性】
利用“@angular/forms" 创建<form>表单的时候,系统默认会创建一个”FormGroup"的对象. 使用带有“ngModel"的”<in ...
- readonly属性在各浏览器中的区别
有个项目需求是正常显示时为只读,不可修改: 点击修改按钮后,可修改表单元素. 首先想到的是readonly属性,其用于规定输入字段为只读,不能修改.在javascript中消除readonly值,可将 ...
- 【转载】解决KindEditor图片上传对话框位置异常问题(浏览器放大缩小时对话框不见了)
今早在整理文件上传模块的时候,发现富文本编辑器 kindeditor 上传图片的对话框无法显示,其实对话框已经生成了,但是它没有top值,所以在页面上看不见. 捣鼓了一个多小时,代码看了一大串,没解决 ...
- HTML5新属性在Google浏览器中不能显示的问题
这两天在学习HTML5新属性时遇到了如下问题,很是不解: 例如在学习使用canvas时,需要绘制一个红色的原点,代码如下: <!DOCTYPE HTML> <html> < ...
- css - position relative与display table-cell深入分析
在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...
- IE7下position:relative的问题
如果在IE7中使用position:relative属性,需要在该元素的容器上,同时给予position:relative属性.
- position 的属性值
理论上来说,全部 position 的取值有8个 包括:position:static | relative | absolute | fixed | sticky | initial | inhe ...
- 解决video标签在微信中强制全屏、微信全屏播放(Android和IOS)
在video标签中加上代码: x5-playsinline="true" webkit-playsinline="true" playsinline=" ...
随机推荐
- Nginx 笔记与总结(15)nginx 实现反向代理 ( nginx + apache 动静分离)
在 nginx 中,proxy 用来实现反向代理,upstream 用来实现负载均衡. 例如有两台服务器,nginx 服务器作为代理服务器,执行 .html 文件,apache 服务器上执行 .php ...
- mac 下 word 2011 使用笔记
1. 全屏预览,最大限度减少干扰 点击左下角焦点视图图标进入焦点视图. 调整为页面宽度或单页,点击顶部右侧百分比调整. 2.无格式粘贴 option + shift + command + v 3.无 ...
- delphi 高版本可执行程序减小的办法
选菜单里的 Project -> Options.. (Shift+Ctrl+F11)出现Project Options for Project1.exe窗口,在左边选 Packages出现如下 ...
- 面向对象之struct
struct PointStruct { int pointx = 1; int pointy = 2; public PointStruct(int x, int y) { this.pointx ...
- 蓝牙—服务发现协议(SDP)
服务搜索协议(SDP)提供了应用发现可用服务以及确定可用服务特点的方法.SDP发现协议提供下面的能力 <1>为客户提供搜索所需要服务的能力. <2>允许基于服务类型搜索服务 & ...
- Bluetooth Low Energy介绍
目录 1. 介绍 2. 协议栈 3. 实现方案 3.1 硬件实现方案 3.2 软件实现方案 1. 介绍 Bluetooth low energy,也称BLE(低功耗蓝牙),在4.0规范中提出 BLE分 ...
- Qt自定义model
前面我们说了Qt提供的几个预定义model.但是,面对变化万千的需求,那几个model是远远不能满足我们的需要的.另外,对于Qt这种框架来说,model的选择首先要能满足绝大多数功能的需要,这就是说, ...
- (leetcode)Implement Stack using Queues
Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...
- Java学习-009-文件名称及路径获取实例及源代码
此文源码主要为应用 Java 获取文件名称及文件目录的源码及其测试源码.若有不足之处,敬请大神指正,不胜感激!源代码测试通过日期为:2015-2-3 00:02:27,请知悉. Java获取文件名称的 ...
- sql中的行转列和列转行的问题
sql中的行转列和列转行的问题 这是一个常见的问题,也是一个考的问题 1.行转列的问题 简单实例 CREATE TABLE #T ( MON1 INT, MON2 INT, MON3 INT ) G ...