[前台]---input标签中的hidden,浏览器差异问题

前言:
这是一个比较简单的问题,也有人犯过这样的错误,如果你是一个人在编码,并且没有专门的去测试浏览器差异,这个或许会坑到你

问题描述:
用input标签的时候,需要把这个input隐藏掉,于是先这样做:

<input hidden id="xxx" value="xxx"/>

这行代码运行后,在谷歌浏览器完美的隐藏了这个input,但在360浏览器上却展示出来了,并没有隐藏.

修改后:

<input type="hidden" id="xxx" value="xxx"/>

问题很容易解决了,因为后面这种写法是常规写法,哪个老师教最开始也都是这种写法

透过问题看本质:
首先,用第二种写法type=”hidden”去隐藏一个input标签,任何浏览器都是认这种写法的,但由于各个浏览器的内核不同,导致第一种写法,某些内核的浏览器就认不出来了

接下来简单说说浏览器的内核(某度搜的,感觉写的很好):
浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有 10 多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。

众多浏览器及其对应使用的内核:
1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE内核；
9、2345浏览器内核：好像以前是IE内核，现在也是IE+Chrome双内核了；
10、UC浏览器内核：这个众口不一，UC说是他们自己研发的U3内核，但好像还是基于Webkit和Trident，还有说是基于火狐内核。

[前台]---input标签中的hidden,浏览器差异问题相关推荐

input标签中常见的type属性介绍
input标签中常用的type属性介绍 type="text"--->文本框type="password"--->密码框type="rad ...
html中加减号怎么输入,jQuery 实现点击加减号改变input标签中的value值,该怎么解决...
jQuery 实现点击加减号改变input标签中的value值我想点击左右两边的加减号,让中间input标签中的value属性值做出相应的改变,jQuery怎么实现? ------解决思路 ...
html中input标签中type属性小总(包含html5新增表单属性)
前言 HTML5新增了许多属性和方法,其中一些就有input标签中 type属性. 有关于input中type的全部可取值如下 1.button 2.text 3.time(会呈现表的形状) 4. ...
[前台]---js获取input标签中name相同的各个value值
在页面form表单中,经常会有相同name的多个input标签,在提交表单前需要对这些input的value值做校验,就要在js中拿到这些值,下面这个方法,亲测是最实在的: 页面:<input ...
js获取用户在input标签中输入的值，然后改变html下各个标签的值或者属性
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html lang="en"> <head ...
使用JavaScript在input标签中添加readonly属性
JavaScript如何将readonly属性添加到input标签?下面本篇文章就来给大家介绍一下使用JavaScript将readonly属性添加到input标签的方法,希望对大家有所帮助. 在Ja ...
HTML input标签中disabled属性
HTML 标签的 disabled 属性这是一个不可输入的文本框 <input type="text" name="" disabled="d ...
input 标签中的 Hiden隐藏域
上面是html中的隐藏域.主要作用为: 1 .隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用.浏览者单击发送按钮发送表单的时候,隐藏域的信息 ...
selenium处理获取input标签中的value值
imput是html中的一个标签,该标签有很多属性,在处理自动化时,通常我们需要校验这个value值,那么如果按平时的id xpath之类的定位,是获取不到input的value值的. 正确的获取方法 ...

[前台]---input标签中的hidden,浏览器差异问题

[前台]---input标签中的hidden,浏览器差异问题相关推荐

最新文章

热门文章