select在各浏览器中显示option的测试
2013-03-28 11:14
357 查看
这周公司要出sp3了,忙着测试产品包,我负责测试js的产品包,必须保证每一个范例都可以运行,测试了一天发现了不少问题,其中一个就是使用select的范例在ie8时显示出问题,ie7下直接显示不了option,经过查资料将其兼容了,这里记录一下。
方法1:
代码如下:
测试结果:Firefox、Chrome、IE9、IE8、IE7、Safari、Opera显示正常。
方法2:
代码如下:
测试结果:Firefox、Chrome、Safari、Opera显示正常,IE9、IE8、IE7下不能显示。
方法3:
代码如下:
测试结果:Firefox、Chrome、Safari、Opera显示正常,IE9、IE8、IE7下不能显示。
方法4:
将方法3的insertBefore第二个参数去掉,也就是说我们第一个option就想使用insertBefore时,看一下情况:
测试结果:Chrome、Safari显示正常,Firefox、IE9、IE8、IE7、Opera下不能显示。
方法5:
代码如下:
测试结果:Firefox、Chrome、IE9、IE8、IE7、Safari、Opera显示正常。
方法6:
代码如下:
测试结果:Firefox、Chrome、IE9、IE8、IE7、Safari、Opera显示正常。
方法7:
代码如下:
测试结果:Firefox、Chrome、Safari、Opera显示正常,IE9、IE8、IE7下不能显示。
方法1:
代码如下:
<html> <head> <title></title> <script type="text/javascript"> function init() { var s = document.getElementById("s"); s.add(new Option("A")); } </script> </head> <body onload="init()"> <select id="s" style="width:100px;background:lightskyblue"></select> </body> </html>
测试结果:Firefox、Chrome、IE9、IE8、IE7、Safari、Opera显示正常。
方法2:
代码如下:
<html> <head> <title></title> <script type="text/javascript"> function init() { var s = document.getElementById("s"); s.appendChild(new Option("B")); } </script> </head> <body onload="init()"> <select id="s" style="width:100px;background:lightskyblue"></select> </body> </html>
测试结果:Firefox、Chrome、Safari、Opera显示正常,IE9、IE8、IE7下不能显示。
方法3:
代码如下:
<html> <head> <title></title> <script type="text/javascript"> function init() { var s = document.getElementById("s"); s.add(new Option("A")); s.insertBefore(new Option("B"), s.options[1]); } </script> </head> <body onload="init()"> <select id="s" style="width:100px;background:lightskyblue"></select> </body> </html>
测试结果:Firefox、Chrome、Safari、Opera显示正常,IE9、IE8、IE7下不能显示。
方法4:
将方法3的insertBefore第二个参数去掉,也就是说我们第一个option就想使用insertBefore时,看一下情况:
<html> <head> <title></title> <script type="text/javascript"> function init() { var s = document.getElementById("s"); s.insertBefore(new Option("D")); } </script> </head> <body onload="init()"> <select id="s" style="width:100px;background:lightskyblue"></select> </body> </html>
测试结果:Chrome、Safari显示正常,Firefox、IE9、IE8、IE7、Opera下不能显示。
方法5:
代码如下:
<html> <head> <title></title> <script type="text/javascript"> function init() { var s = document.getElementById("s"); s.options[0] = new Option("E"); } </script> </head> <body onload="init()"> <select id="s" style="width:100px;background:lightskyblue"></select> </body> </html>
测试结果:Firefox、Chrome、IE9、IE8、IE7、Safari、Opera显示正常。
方法6:
代码如下:
<html> <head> <title></title> <script type="text/javascript"> function init() { var s = document.getElementById("s"); var op = document.createElement("option"); op.appendChild(document.createTextNode("F")); s.appendChild(op); } </script> </head> <body onload="init()"> <select id="s" style="width:100px;background:lightskyblue"></select> </body> </html>
测试结果:Firefox、Chrome、IE9、IE8、IE7、Safari、Opera显示正常。
方法7:
代码如下:
<html> <head> <title></title> <script type="text/javascript"> function init() { var s = document.getElementById("s"); s.innerHTML = "<option>X</option><option>Y</option>"; } </script> </head> <body onload="init()"> <select id="s" style="width:100px;background:lightskyblue"></select> </body> </html>
测试结果:Firefox、Chrome、Safari、Opera显示正常,IE9、IE8、IE7下不能显示。
相关文章推荐
- select在各浏览器中显示option的测试结果分享
- html中select显示非option的文字:做下拉框的时候用这些文字当提示
- SELECT中OPTION元素的显示隐藏
- jq 解决ie9以下 select宽度固定 option 显示不
- node-qunit的测试结果如何显示到浏览器中(4)
- 关于在测试php文件时在浏览器上显示源码问题
- IE 6/7/8 BUG:下拉框select设宽度时option超出显示不全
- jenkins运行selenium 测试 不显示浏览器 解决方法
- 微信或手机浏览器在线显示office文件(已测试ios、android)
- 动态显示select的option默认显示
- jenkins运行selenium 测试 不显示浏览器 解决方法
- IE8中select控件中的option显示不全解决方案
- laravel 从route路由开始经过controller操作mysql数据库并返回结果显示在浏览器中 (select)
- JavaScript对select中option的隐藏和显示操作
- Select 可编辑 - 完美支持各大主流浏览器 最近做项目有个select可编辑的需求,一时棘手,网上找了很多解决方案都不完美,没办法自己写了一个,经测试IE,FF,chrome都支持。特此拿出来
- select下拉option内容太,需要截取显示,demo
- 在线测试不同操作系统不同浏览器网页的显示效果
- web UI 测试用例 2 在不同的浏览器和分辨率下文字显示的正确性
- jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
- input与select在不同浏览器上的宽度显示不同