`
一只妖娆
  • 浏览: 5226 次
  • 性别: Icon_minigender_2
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

表单在浏览器下的统一表现

表单对齐htmldtdxhtml浏览器 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>input等在各个浏览器下的表现统一</title>

<style>

        body{

                margin:0;

                padding:1px;

                font-family:"Microsoft YaHei",Arial,SimSun,Tahoma;

                font-size:12px;

                background:url(page-bg.gif) 0 0 repeat;

        }

        h1{

                margin:0;

                padding:0;

                height:69px;

                color:#263a66;

                font-size:20px;

        }

        h2{

                margin:1px 0 0;

                padding:0;

                font-size:12px;

                height:35px;

        }

        div{

                height:105px;

        }

        ul{

                margin:0;

                padding:0;

                list-style:none;

        }

        li{

                height:32px;

        }

        label{

                clear:left;

                float:left;

                width:119px;

                height:19px;

                line-height:19px;

                _line-height:20px;

                overflow:hidden;

                text-align:right;

                cursor:pointer;

        }

        input{

                color:#666;

                font-size:12px;

        }

        textarea{

                width:400px;

                height:5em;

                margin:0 0 0 4px;

                *margin:-1px 0 0 4px;

                _margin:-1px 0 0 2px;

                padding:3px;

                color:#666;

                font-size:12px;

                border:1px solid #a7a6aa;

                background:#FFF url(input-bg.gif) 0 0 no-repeat;

        }

        input[type="text"]{

                margin:0 5px 0 5px;

                *margin:-1px 5px 0 5px;

                padding:3px;

                width:219px;

                height:12px;

                border:1px solid #a7a6aa;

                background:#FFF url(input-bg.gif) 0 0 no-repeat;

        }

        input[type="checkbox"]{

                margin: 3px 0 0 5px;

                *margin:-1px 0 1px 1px;

                _vertical-align:middle;

        }

        input[type="radio"]{

                *margin:-1px 0 0 1px;

        }

        input[type="file"]{

                height:18px;

                margin:0 0 0 4px;

                *margin:-1px 0 0 4px;

        }

        select{

                margin:0 0 0 4px;

                _margin:0 0 0 2px;

        }

        * html input.text{

                margin:-1px 5px 0 2px;

                padding:3px;

                width:223px;

                height:12px;

                border:1px solid #a7a6aa;

                background:#FFF url(input-bg.gif) 0 0 no-repeat;

        }

        * html input.checkbox{

                margin:-1px 0 0 -2px;

        }

        * html input.radio{

                margin:-1px 0 0 -2px;

        }

        * html input.file{

                margin:-1px 0 0 1px;

        }

</style>

</head>



<body>

        <h1>input输入框在浏览器下的统一</h1>

        <h2>input type="text"</h2>



        <div>

                <ul>

                        <li><label for="text-1">输入框:</label><input type="text" class="text" id="text-1" /></li>

                        <li><label for="text-2">输入框:</label><input type="text" class="text" id="text-2" /></li>

                </ul>

        </div>

        <h2>input type="checkbox"</h2>



        <div>

                <ul>

                        <li><label for="checkbox-1">复选框:</label><input type="checkbox" class="checkbox" id="checkbox-1" /></li>

                        <li><label for="checkbox-2">复选框:</label><input type="checkbox" class="checkbox" id="checkbox-2" /></li>

                </ul>

        </div>

        <h2>input type="radio"</h2>



        <div>

                <ul>

                        <li><label for="radio-1">单选框:</label><input type="radio" class="radio" id="radio-1" name="radio-1" /></li>

                        <li><label for="radio-2">单选框:</label><input type="radio" class="radio" id="radio-2" name="radio-1" /></li>

                </ul>

        </div>

        <h2>input type="file"</h2>



        <div>

                <label for="file">提交表单:</label><label for="file">提交表单:</label> <input class="file" type="text" id="file" name="file" style="width:250px;" /><input type="button" value="浏览" /><input class="input_file" size="40" type="file" onchange="txt.value=this.value" style="width:300px; margin-left:-300px; filter:alpha(opacity=0); opacity:0;" />

        </div>

        <h2>textarea type="file"</h2>

        <div>

                <label for="textarea">提交表单:</label><textarea name="" class="textarea" id="textarea"></textarea>

        </div>



        <h2>select</h2>

        <div>

        <label for="Select">下拉框:</label>

        <select name="" id="Select">

                <option>asdasd</option>

                <option>asdasd</option>

                <option>asdasd</option>

                <option>asdasd</option>

        </select>

        </div>

</body>

</html>
分享到：
| 一个JQ焦点图插件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ie下美化表单，兼容各大浏览器

    然而，原生的HTML表单控件，如`&lt;input&gt;`和`&lt;select&gt;`，在不同的浏览器中表现不一，尤其是在老版本的IE（Internet Explorer）中，其样式和功能的兼容性问题尤为突出。本文将深入探讨如何在IE及其他主流浏览器下美化`...

    如何让css在所有浏览器下兼容

    ### 如何让CSS在所有浏览器下兼容 在Web开发领域，确保CSS代码能够在不同浏览器上稳定运行是一项重要的技能。本文将详细介绍如何使CSS在各种浏览器（包括但不限于IE6、IE7、IE8以及现代浏览器如Firefox和Chrome）下...

    浏览器兼容测试工具

    这些工具通常提供模拟不同浏览器环境的功能，允许开发者在一个统一的平台上测试其代码在多浏览器环境下的表现。这些工具可以分为在线服务和本地应用两大类： 1. **在线服务**：如BrowserStack、Sauce Labs和...

    js日期控件支持多种浏览器

    1. **多浏览器兼容性**：由于不同的浏览器对JavaScript的实现可能存在差异，日期控件会针对这些差异进行优化，确保在各种浏览器上表现一致。 2. **易用性**：提供简单的API，使得开发者能够方便地在HTML和ASP.NET...

    解决浏览器兼容

    不同的浏览器由于内核实现和标准支持的差异，可能会导致相同代码在不同浏览器上表现出不一致的行为。本篇将深入探讨如何解决浏览器兼容问题，帮助您确保网站或应用在各种主流浏览器上都能正常运行。 一、了解浏览器...

    浏览器兼容问题处理

    不同的浏览器对某些JavaScript语法、DOM操作以及CSS样式的支持程度不尽相同，这导致了在不同浏览器下可能出现功能差异或者页面渲染问题。以下是一些常见的浏览器兼容性问题及解决方案： 1. **表单元素访问方式**： ...

    浏览器兼容性汇总

    **解决方案**: 统一采用 `document.getElementById("idName")` 方法来获取DOM元素，以确保代码在不同浏览器中的一致性。 ##### 2. const问题 - **火狐（Firefox）**: 支持使用 `const` 关键字或 `var` 定义常量。 ...

    多浏览器兼容的JS日历控件

    在开发Web应用时，确保组件在各种浏览器上都能正常运行是一项重要的任务，特别是涉及到...通过理解和应用这些兼容性策略，开发者可以创建出不仅在最新浏览器中表现优秀，也能在老旧浏览器中正常工作的应用程序。

    Firefox浏览器兼容JS脚本

    在不同的浏览器中阻止表单提交的方式也存在差异。在IE中，可以使用`event.returnValue = false;`来实现；而在Firefox中，则是通过`event.preventDefault();`来完成这一操作。 ```javascript // IE event.return...

    浏览器兼容

    在开发过程中，可能会遇到这样的情况：当用户在一个表单输入框中按下回车键时，页面会触发默认的表单提交行为，而不是执行预期的AJAX请求。为了解决这个问题，可以通过JavaScript来拦截回车键事件。例如，以下代码段...

    兼容ie、谷歌等浏览器的日期输入控件

    它允许用户在Internet Explorer（IE）和Google Chrome等不同的浏览器上方便地输入和选择日期，提供了统一的用户体验。 在HTML5中，`&lt;input type="date"&gt;`标签被引入，用于创建一个日期选择器，但在老版本的IE浏览器...

    jQuery formalize （jQuery 表单插件）

    1. **自动填充样式**：jQuery Formalize能够为表单元素添加统一的边框、背景和内阴影等视觉效果，使得在不同浏览器下表单元素看起来更加协调统一。 2. **表单元素聚焦和失去焦点的处理**：当用户点击输入框时，插件...

    支持多浏览器的时间控件_带时分秒

    然而，这个原生控件在不同浏览器上的表现并不一致，尤其是在老版本的Internet Explorer中可能无法得到良好的支持。因此，开发者需要创建跨浏览器兼容的时间控件来确保所有用户都能正常操作。 一个支持多浏览器的...

    jNice 是一个用来漂亮表单的插件

    jNice与Bootstrap的Form Validation、jQuery UI等其他表单插件相比，可能在功能上略显简单，但在易用性和灵活性方面表现出色。对于只需要基础美化和验证功能的项目，jNice是一个很好的选择。 **6. ** **注意事项** ...

    简单且强大的js表单验证框架

    **标题解析：** "简单且强大的js表单验证框架" 这个...通过以上分析，我们可以理解这是一个旨在简化和优化Web表单验证流程的JavaScript框架，它具有中文文档，便于国内开发者使用，并且在功能和易用性上都有优秀表现。

    基于Bootstrap的表单向导

    10. **测试和优化**：最后，确保表单向导在不同浏览器和设备上表现一致，并进行性能优化，如减少HTTP请求，压缩CSS和JS文件，以提高加载速度。 综上所述，创建"基于Bootstrap的表单向导"涉及到对Bootstrap框架的...

    泛微E9 表单建模案例 知识产权管理

    5. **浏览器兼容性**：browser.xml可能定义了软件在不同浏览器下的表现，确保在知识产权管理过程中，无论员工使用何种设备或浏览器，都能顺畅地访问和操作。 6. **文件管理**：file.xml和file目录可能用于存储与...

    jqtransform jQuery 表单美化,很漂亮

    3. **兼容性**：jqTransform考虑到了不同浏览器的兼容性问题，努力确保在多种浏览器环境下都能保持良好的表现，包括Firefox、Chrome、Safari、IE等。 4. **响应式设计**：jqTransform也支持响应式布局，可以根据...

    表单样式美化

    然而，浏览器默认的表单样式往往显得单调且不统一，不同浏览器之间的表现差异也较大。为了解决这些问题，开发者通常会利用CSS来美化表单，使其符合整体设计风格，提升用户体验。本文将深入探讨如何通过CSS来实现表单...

    网站透明表单模板下载是一款HTML网站常用的登录注册表单模板。.zip

    - **适应性**：检查表单在不同浏览器和设备上的表现，确保兼容性和一致性。 - **易用性**：确保表单的可读性和可用性，比如合适的字体大小、颜色对比和输入验证。 - **安全性**：考虑到数据安全，表单应当包含防止...

Magicbox
Global site tag (gtag.js) - Google Analytics