Firefox和Internet Explorer上的CSS中子元素的定位问题
帅哥
我正在尝试使用CSS正确定位密码字段的拨动开关。问题是该定位在google chrome中很好用，但是在firefox和IE中不起作用。我试图找出解决方案，但是Web开发的初学者我没有解决办法。请帮助我找出解决方案。
我的HTML部分
<div id="password">
<label for="pwd">Password</label>
<div>
<input type="password" id="pwd" name="pass_word" autocomplete="off" maxlength="12" value="<?php echo $pwd; ?>">
<span class="icon"><i id="show-pwd" class="far fa-eye hide"></i></span>
<span class="icon"><i id="hide-pwd" class="far fa-eye-slash"></i></span>
</div>
<div id="perr" class="err"><?php echo $pwderr; ?></div>
</div>
<div id="confirm-password">
<label for="cnfpwd">Confirm Password</label>
<div>
<input type="password" id="cnfpwd" name="cnf_pwd" autocomplete="off" maxlength="12" value="<?php echo $cpwd; ?>">
<span class="icon"><i id="show-cnfpwd" class="far fa-eye hide"></i></span>
<span class="icon"><i id="hide-cnfpwd" class="far fa-eye-slash"></i></span>
</div>
<div id="cperr" class="err"><?php echo $cpwderr; ?></div>
</div>
我的CSS部分
.confirm-password{
position: relative;
}
.icon{
position: absolute;
transform: translate3d(-140%,40%,0);
color: #555;
}
第一个图像显示了它在chrome中的外观，第二个图像显示了在Firefox中的外观。
Julie Xiong
您div的ID为，confirm-password但CSS规则适用于类：.confirm-password。更改.为#，您div现在将已position: relative分配给它。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Internet Explorer和Firefox上缺少CSS
- 2
Chrome与Firefox和Internet Explorer的空间不同
- 3
如何在Firefox和Internet Explorer中使SVG更加清晰
- 4
Internet Explorer和Firefox是否支持@media页面？
- 5
Firefox和Internet Explorer中的范围样式不正确
- 6
如何禁用Internet Explorer和Firefox中的缩放？
- 7
无法在Firefox和Internet Explorer中加载图像
- 8
Firefox和Internet Explorer显示垃圾而不是特定站点
- 9
Firefox和Internet Explorer中的范围样式不正确
- 10
如何修复Firefox和Internet Explorer中的导航菜单？
- 11
内容在Firefox和Internet Explorer中不起作用？
- 12
raphael js在Firefox和Internet Explorer中拖动旋转
- 13
在Firefox和Internet Explorer中渲染FontAwesome和Glyphicons时出现问题
- 14
Internet Explorer中的定位问题
- 15
Internet Explorer 中的问题，定位？
- 16
Firefox和Chrome之间的CSS定位问题
- 17
列表在firefox和Internet Explorer上显示错误，但在chrome上未显示
- 18
在Chrome和Firefox中可以使用Canvas元素+ Javascript，而不能在Internet Explorer中使用
- 19
在Chrome和Firefox中可以使用Canvas元素+ Javascript，而不能在Internet Explorer中使用
- 20
提交按钮未出现在Firefox中，但出现在Chrome和Internet Explorer上
- 21
在Firefox和Internet Explorer中解析DateTime字符串失败，可在Chrome上使用
- 22
网站在Firefox，Internet Explorer和Google Chrome上的显示方式有所不同
- 23
我的CSS无法在Internet Explorer 11和Firefox中加载！仅适用于Chrome
- 24
为什么CSS3动画不能在Firefox和Internet Explorer中运行？
- 25
制表符宽度CSS在Firefox和Internet Explorer中不起作用
- 26
CSS动画可以在Chrome和Safari中使用，但不能在Firefox和Internet Explorer中使用
- 27
为什么在 Firefox、Safari 和 Internet Explorer 中不支持单击处理程序事件 SVG 元素？
- 28
Firefox不会将表行显示为Chrome和Internet Explorer
- 29
Internet Explorer和Firefox在页面上未显示所有图像
我来说两句