textarea在firefox浏览器中边框内阴影的消除办法

问题现象

如下图所示,textarea在firefox中显示有内阴影。chrome浏览器中却没有这样的效果。这是为何呢?

应用了同样的样式,为何在不同的浏览器中显示的效果不尽相同?如何去除firefox显示效果中的内阴影呢?

分析

我们将边框的宽度加大,看看“阴影”是什么?

从效果上看这个阴影应该是一种border-style。不同的浏览器中使用了不同border-style样式。手动将border-style固化为solid, 如下所示:

textarea {
    width: 400px;
    height: 100px;
    border-color:#c0c4cc
    border-style:solid;
}

阴影消失:

结论

这个问题的根原是笔者在css中仅仅设置了border-color:#c0c4cc,未设置border-style和border-width,从而导致浏览器使用了不用的默认样式,chrome浏览器默认使用了border-style:solid,而firfox浏览器使用了border-style:inset(inset border参考这里)样式。

推荐大家在定义border时同时设置border-width、border-style和border-color,。例如:

textarea {
    width: 400px;
    height: 100px;
    border: 10px solid #c0c4cc;
}

从而避免浏览器的兼容性问题。

原文地址:https://www.cnblogs.com/yanzhenjingyan/p/10126186.html

时间: 2024-11-10 18:59:38

textarea在firefox浏览器中边框内阴影的消除办法的相关文章

firefox浏览器中silverlight无法输入问题

今天用firefox浏览silverlight网页,想在文本框中输入内容,却没想到silverlight插件意外崩溃了.google一下,发现这是firefox的设置问题,解决方法如下: 1.在Firefox浏览器地址栏输入 about:config 2.点击“我保证会小心” 3.查找项目dom.ipc.plugins.enabled.npccbnetsigncom.dll,把它由 false 改成 true 4.关闭Firefox浏览器,再启动,OK

JavaScript在IE浏览器和Firefox浏览器中的差异总结

window.event对象差异 IE:有window.event对象 FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=doMouseMove(event) 获取鼠标当前坐标 IE:event.x和event.y. FF:event.pageX和event.pageY. 通用:两者都有event.clientX和event.clientY属性. 鼠标当前坐标(加上滚动条滚过的距离) IE:event.offsetX和event.offse

textarea 在浏览器中固定大小和禁止拖动

HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同,可以拖动右下角图标改变大小.但是过分拖动大小会影响页面布局,使页面变得不美观.可以通过添加如下两个样式禁用拖动,固定大小: 1:彻底禁用拖动(推荐) resize:none; 2:只是固定大小,右下角的拖动图标仍在 wi

textarea 在浏览器中禁用拖动和固定大小

HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同,可以拖动右下角图标改变大小.但是过分拖动大小会影响页面布局,使页面变得不美观.可以通过添加如下两个样式禁用拖动,固定大小: 1:彻底禁用拖动(推荐) resize: none; 2:只是固定大小,右下角的拖动图标仍在 w

转载 | textarea 在浏览器中固定大小和禁止拖动

HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同,可以拖动右下角图标改变大小.但是过分拖动大小会影响页面布局,使页面变得不美观.可以通过添加如下两个样式禁用拖动,固定大小: 1:彻底禁用拖动(推荐) resize: none; 2:只是固定大小,右下角的拖动图标仍在 w

textarea 在浏览器中固定大小和禁止拖动

HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同,可以拖动右下角图标改变大小.但是过分拖动大小会影响页面布局,使页面变得不美观.可以通过添加如下两个样式禁用拖动,固定大小: 1:彻底禁用拖动(推荐) resize: none; 2:只是固定大小,右下角的拖动图标仍在 w

托管到github上的网页图片在百度浏览器中显示不全

这几天做了个较完整的网页放到github上,上传后看网页效果. 在Firefox浏览器中,显示正常. 在百度浏览器中,空了一大块位置(图片位置),偏偏只空了这一块,其它地方的图片都好好的. 点击f12查看,源代码中的<img>也不见了. 将错误信息放到百度上搜,有网友解释是因为 有"ad" 或"ads", 而我那几张图片就放在"ad"文件夹中. 更改文件名后,正常显示了.我........ 应该是百度浏览器里面有个什么插件过滤掉&qu

Jq 微信浏览器中touchMove 时而卡顿的问题

在企业想中 自定义了个控件 是用 手指拖动触发 Canvas 会话的内容,但是 在 PC 浏览器中 用 touchMove 很流畅,但是在手机浏览器中就是会 卡.解决办法 下touchstrart 的function 中添加 e.preventDefault();即可解决. event.preventDefault()是阻止默认行为啊! 主要是由于200ms超时导致内核不一定会一直处理touchmove事件,一旦超时会将后续所有的事件转交给UI处理,导致touchmove不会一直触发.系统浏览器

selenium,在Eclipse中打开fireFox浏览器报错:org.openqa.selenium.firefox.NotConnectedException: Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms

1. 相信很多同学刚接触selenium时,在Eclipse中打开fireFox浏览器是报报错:org.openqa.selenium.firefox.NotConnectedException: Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms. Firefox console output:...(异常代码太多此处省略) 在网上找了好多方法都是不能解决问题,结果是焦头烂额! 2.其实这是selenium的jar包和