在写html页面，我们很自然的在表单提交的地方采用button来作为提交按钮，但是，用<button type=”button”>按钮</button>作为提交代码会有个问题，就是设置样式在不同浏览器可能会显示不同的样子，例如，下面的代码在不同浏览器就会有不同的效果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

</head>

<body>

<button type="button">自带button按键</button>

</body>

</html>

谷歌浏览器环境打开：

，鼠标移动到button，还是差不多的界面，没有变色

ie6浏览器打开：

，鼠标移动到button，颜色变了！

火狐浏览器打开：

鼠标移动到button

颜色也变了，但是颜色跟ie6下的不太一样,颜色更浅一点。

所以，html中button在不同浏览器下的显示效果是不同的，为了改变这个问题，我们用javascript:void(0)制作假的按键button。

基本思路：

用a标签做个按钮，制作按钮显示效果，当用户点击按钮，用ajax提交表单就可以。我这里就只做一个按钮。

具体代码就是下面这样：

<a href="javascript：void(0);" >提交</a>

剩下的工作就是制作你要的样式，随便做成什么样子都不会因为浏览器兼容导致样式不一样。

本人博客地址：利用javascript:void(0)制作假的提交按钮替代button

利用javascript:void(0)制作假的提交按钮替代button的更多相关文章

  1. 一个好玩的小制作，以及在<a/>中的标签href="javascript:;"/href="javascript:void(0);"/href="javascript:"的用法

    一:一个小图标的制作 我们在支付宝.微信等某些地方上传文件时会遇到以下的图标,但是这样的图标其实可以用<a/>标签以及css样式完成, 具体代码如下: <!DOCTYPE html& ...

  2. js中 javascript:void(0) 用法详解

    点击链接不做任何事情: <a href="#" onclick="return false">test</a> <a href=& ...

  3. a href=#与 a href=javascript:void(0) 的区别

    a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" onCl ...

  4. href使用 javascript:;与javascript:void(0)防跳到顶部

    有时候我们在编写js过程中,需要触发事件而不需要返回值,那么就可能需要这样的写法   href=”#”,包含了一个位置信息.默认的锚是#top,也就是网页的上端,当连续快速点击此链接时会导致浏览器巨慢 ...

  5. javascript:void(0)

    这是不是一个设计缺陷呢 void(0)这种用法巧妙利用void关键字的特性返回undefined(且没有副作用).因为不是关键字,比如直接使用undefined,内容可能被改写. 再来看为啥使用0,而 ...

  6. javascript:void(0) ,设置a链接无效,设置点击a页面不刷新,不跳动

    http://www.cnblogs.com/opper/archive/2009/01/12/1373971.html 我想使用过ajax的都常见这样的代码: <a href="ja ...

  7. javascript:void(0)和javascript:;的用法

    一.JavaScript:void(0) 我们经常会使用到 javascript:void(0) 这样的代码,那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢 ...

  8. JS中javascript:void(0)真正含义

    对于下面的代码,其中void(0)的含义是什么? <a href="javascript:Test();void(0);">hello</a> 其实,Jav ...

  9. JavaScript中“javascript:void(0) ”是什么意思

    来源: <a href="javascript:test();void(0);">here</a> 此处:Javascript中void是一个操作符,该操作 ...

随机推荐

  1. 信号（Django信号、Flask信号、Scrapy信号）

    简介 Django.Flask.scrapy都包含了一个“信号分配器”,使得当一些动作在框架的其他地方发生的时候,解耦的应用可以得到提醒. 通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒 ...

  2. mysql 数据操作 单表查询 group by 练习

    小练习: 1. 查询岗位名以及岗位包含的所有员工名字 mysql> select post,group_concat(name) from employee group by post ; +- ...

  3. android gson使用

    第一步注册:  compile 'com.google.code.gson:gson:2.6.2' 第二步初始化: Gson gson = new GsonBuilder() .setLenient( ...

  4. file /etc/httpd/conf.d/php.conf from install of php-5.6.37-1.el7.remi.x86_64 conflicts with file from package mod_php71w-7.1.18-1.w7.x86_64

    yum remove mod_php71w php71w-cli

  5. MISC-WHCTF2016-crypto100

    题目:李二狗的梦中情人  找不同! 如图,下载得到“nvshen.png” 流程:看到这个被命名为nvshen的文件,感觉文件本身会有东西.用16进制查看器在图片的末尾发现了一串类似URL的ASCII ...

  6. (转)通过HTTP RESTful API 操作elasticsearch搜索数据

    样例数据集 这是编造的JSON格式银行客户账号信息文档,文档schema如下: { “account_number”: 0, “balance”: 16623, “firstname”: “Brads ...

  7. linux磁盘空间使用问题

    linux磁盘空间用满的处理方法 linux下空间满可能有两种情况 可以通过命令 df -h  查看磁盘空间占用,实际上是查看磁盘块占用的文件(block) df -i  查看索引节点的占用(Inod ...

  8. 4.12 Routing -- Preventing And Retrying Transitions

    一.概述 在一个路由的跳转过程中,Ember路由器传递一个跳转对象到被跳转调用的路由的不同的hooks中.任何一个hook获取这个跳转对象,有能力通过调用transition.abort()终止跳转, ...

  9. activiti 数据表设计

    activiti数据表分为5个部分: 通用数据表.流程存储表.身份数据表.运行时数据表.历史数据表 1.通用(general)数据表 以ACT_GE开头 资源表-act_ge_btyearray: 用 ...

  10. 牛客国庆集训派对Day5 Solution

    A    璀璨光滑 留坑. B    电音之王 蒙特马利大数乘模运算 #include <bits/stdc++.h> using namespace std; typedef long ...