关于火狐在<td>中不支持使用position:relative

最新推荐文章于 2024-01-18 15:50:18 发布
最新推荐文章于 2024-01-18 15:50:18 发布
阅读量2.8k 收藏
点赞数
分类专栏： Web Developer 文章标签： firefox position relative td div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crazyjwang/article/details/9531887
版权

早些时候在写一个界面的时候,由于要在输入框下设置一个提示栏,手写了一个在一开始隐藏的<div>,输入的时候显示,<div>相对于<table>中的<td>,chrome中完美实现,当把整个项目放在别人电脑上运行一次后,发现原本相对定位的框跑到浏览器的左上角去了,唯一的差别就是我用的是chrome, 他用的是firefox,后来查找了一些资料,才知道这是因为在css2.1中在table中定义position:relative 是没有定义的,火狐依旧采用的老标准(大概是这样的).

最终我采取的解决措施是在<td>中加入一个<div>,不知道有没有更好的方式让其兼容各个浏览器.望不吝赐教.

crazyjwang
关注
专栏目录
html基础-几种布局
qq_46065861的博客
07-31 1420
1.html标签 html为网页标记语言 <标签名> DTD声名 新版 <!DOCTYPE html> 标题标签 hn <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> n越大，字体越小，自动加粗，换行 color设置字体的颜色 1.HEXColor 六位的十
前端CSS
haizheguaishou的博客
07-23 700
CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。 CSS代码语法 p（选择器）{color（属性）:blue（值）} 选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。 声明：在英文大...
Firefox下table单元格td设计relative定位失效解决方案（转）
weixin_30243533的博客
05-16 370
问题描述： 默认情况下，table的单元格td的display为table-cell，在IE给td设置position:relative，然后给它包含的一个容器使用position:absolute进行定位是有效的，但在FF下却不可以。但是在IE下，position:absolute的容器的z-index总是比td的z-index低，td层总是在position:absolute的容器的上...
火狐下不支持position:relative;top:50%;？
lidiansheng的专栏
09-09 3928
要实现垂直居中,见代码： Measure for Measure body{text-align:center;height:100%;} #wrap{ height:100px; width:100px; border:1px solid red; text-align:center; /*关键代码*/ position:relat
关于IE和Firefox下的兼容问题--相对定位
yang6n的专栏
08-14 3509
    对于定位问题，特别是在不用table，只用div之后，精确控制div就更为重要了，可是屋漏又逢连夜鱼，如今又发现了IE和Firefox存在很大的差异，哎~~~~   今天发现相对定位offsetLeft,offsetTop，之间的差异，于是记之。(以下均以offsetLeft为例)   在IE中obj.offsetLeft是当前对象对上body对象的位移, 可是在Firefox里中,obj
火狐浏览器初始化时 position定位失效问题解决
最新发布
qq_56538005的博客
01-18 461
后面突发奇想看看是不是因为是inline-block 的原因导致的 然后将其修改为了block,还真解决了。今天测试突然给我提了个bug，在火狐浏览器上选择器的icon错位了，其他浏览器没问题具体样式如下。感觉是个奇怪的问题，以此记录，具体原因我也懒得纠结了。查看具体代码的时候百思不得其解网上也找不到原因。
table td加上属性position:relative后导致在火狐下面边框消失
小怪獸丶的糖的专栏
05-23 2258
在火狐浏览器下，表格td加上了postion:relative 和背景色为白色，导致边框显示不出来，把背景颜色去掉以后即可显示边框
web前端入门到实战：自定义数字滚动效果
软件开发-前端开发-IT
10-30 1892
分享自定义数字滚动效果 效果图： 一、html代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> ...
带背景色的td设置相对定位后部分边框显示不出来
yuanxj123的博客
09-20 1514
今天在项目中处理表格的过程中遇到了一个让我非常头疼的问题，在火狐浏览（Firefox）器下表格的上边框和下边框消失了，在这里我将我的解决过程记录下来方便回头查看 tr.bgColorTr{ position: relative; background-color: #f2f2f2; font-weight: 600; color: #666; } 当我这么写的时候...
CSS定位实例：解决table中absolute元素的兼容问题
本文将深入探讨如何在HTML表格（table）中使用CSS的`position`属性进行精确定位，特别是在`div`元素与`table`结合的情况下。通常，当一个`div`元素的`position`属性被设置为`absolute`时，它的位置会基于其父元素中...
ie6/7下给table的行tr 添加position:relative;的奇特bug,求大神告知
weixin_30814223的博客
09-15 283
代码： <!DOCTYPE html> <html> <head> <title>ie6/7下给table的行tr 添加position:relative;的奇特bug,求大神告知</title> <style> * { padding: 0; margin: 0; } ...
关于css中的position在各大浏览器（IE,FireFox,Opera）中表现问题
weixin_34197488的博客
10-05 343
关于css中的position在各大浏览器（IE,FireFox,Opera）中表现问题： 第一种情况： 1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition...
火狐position定位时用到margin-top：50%出错
juse__we的博客
01-20 484
今天在做弹层时发现fixed在火狐上不能正确居中，后发现不是positon的问题而是，margin-top的%算发不一样。 DEMO  div style="position:relative;margin: 0 auto;width: 500px;position:relative;background: red;height: 2000px;"> div style="
Firefox下tr的position:relative失效？
langxianfa的专栏
10-04 2658
做了个固定表头的页面，具体是这样做的，在div中包一个table,div的样式设置为overflow:auto;在table里的第一行设置了position:relative样式，然后在div应用onscroll事件进行控制;发现滚动效果只能在ie中有效,ff里无效，好像tr的position:relative被略了一样。具体的代码如下：   http://www.w3.org/199
火狐浏览器中的flex－box与position冲突的解决
喵咪不爱吃鱼的博客
08-18 3693
最近做了一个公司的分享页面，上面的导航栏，是采用flex-box和position的绝对定位，进行实现的，在chrome和safair中的实现的都是好的，本来以为万事大吉，就只差发布的时候，却出现呀，老大兴冲冲的拿来火狐浏览器的，妹子当时就泪崩了，我天，竟然冲突了。 然后妹子就火急火燎进行上网百度呀谷歌呀，最终发现了问题的所在，原因是因为
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>1-用户登录</title> <style type="text/css"> a{text-decoration:none} body{ background-image:url(../img/longmao.webp); background-size: cover; height: 100vh; } h3{ color:#FFF; font-size:30px; } td{ color:#FFF; font-size:20px; } .ps{ padding-top:0px; } </style> <script type="text/javascript"> function refreshVerifyCode() { // 刷新验证码 var verifyCodeImage = document.getElementById("verify_codeImage"); verifyCodeImage.src = "../VerifyCodeServlet?" + Math.random(); } function register() { window.location.href = "register.jsp"; } </script> </head> <body > <h3>新闻发布系统>>用户管理>>登录</h3><hr color="#FFF"> <div class="ps"> <form action="../LoginSerlvet" method="post" name="frm_login"> <table align="center"> <tr> <td>用户名：</td> <td> <input type="text" name="userName"value="张凯"> </td> </tr> <tr> <td>密码：</td> <td> <input type="password" name="userPassword" value="1111"> </td> </tr> <tr> <td>验证码：</td> <td> <input type="text" name="verifyCode" value=""> <img src="../VerifyCodeServlet?t=<%=System.currentTimeMillis()%>" id="checkcode" onclick="this.src='../VerifyCodeServlet?t='+new Date().getTime()"/> </td> </tr> <tr> <td height="50" colspan="2" align="center"> <input type="submit" name="ok" value="提交"> <input type="reset" name="cancel" value="取消"> <input type="button" onclick="register();" value="注册"> </td> </tr> </table> </form> </div> </body> </html>加一个3.Ajax异步验证。登录时账号输完马上显示账号重复了。
06-08
好的，你的要求是在这段代码中加入一个 Ajax 异步验证，当用户输入账号时，立即检测账号是否已存在，并给出相应提示。我给你提供一种实现方式，你可以将以下代码插入到 `<head>` 标签中： ``` <script type="text/javascript"> function checkUsername() { var xmlHttp; try { xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari } catch (e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的浏览器不支持AJAX！"); return false; } } } xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4) { var responseText = xmlHttp.responseText; if (responseText == "0") { document.getElementById("username_message").innerHTML = "该账号已存在，请重新输入"; } else { document.getElementById("username_message").innerHTML = ""; } } }; var username = document.getElementById("username").value; xmlHttp.open("POST", "../CheckUsernameServlet", true); xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttp.send("username=" + username); } </script> ``` 然后，在用户名输入框中加入 onblur 事件，调用 checkUsername() 函数进行账号验证。同时，在页面中加入一个 `<span>` 标签，用于显示账号是否重复的提示信息。修改后的代码如下： ``` <tr> <td>用户名：</td> <td> <input type="text" name="userName" id="username" value="张凯" onblur="checkUsername()"> <span id="username_message"></span> </td> </tr> ``` 最后，在服务器端编写一个 CheckUsernameServlet，用于接收客户端发来的账号信息，检查账号是否已存在，然后将结果返回给客户端。这个部分的代码需要根据你的具体情况进行编写，这里不再赘述。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值