段正淳的css笔记(7)-表单在各个浏览器下的表现统一

http://ued.taobao.com/blog/wp-content/uploads/2008/01/input.html

在工作之余抽了点时间写了一下这个,在ie6-ie7-ff下显示位置基本都一致了。

(发现demo页面用栅格线做背景,调试还真的容易得多 。热力推荐!这个栅格是从photoshop里拷贝来的。)

这样子定义了input等标签,做提交表单的时候就不用担心ie6-ie7-ff下radio、checkbox、text等高低不平,参差不齐的状况了。

但是有一点疑惑.这样根据input的type来定义class名称,会不会不太合适?

还有个问题无法解决,windows选用不同的外观都可能都会导致表单不一样。 俺是在Zune Style和xp默认皮肤下写的,其余皮肤没测试过。

缺点:ie6下text输入框的闪烁光标的高度比外部的高. 看上去像截掉了一段。一时没想到怎么解决. 同样还有select的问题,用js实现同样的操作成本太高,用css又拿它没办法。无奈…不去动它了…

欢迎大家拍砖,共同提高!

时间: 2024-10-06 13:53:04

段正淳的css笔记(7)-表单在各个浏览器下的表现统一的相关文章

JS+DIV+CSS实现仿表单下拉列表效果_javascript技巧

本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果.分享给大家供大家参考.具体如下: JS+DIV+CSS实现仿表单下拉列表效果,是完全用CSS技术再配合JS实现的效果,用来代替传统的Select下拉框,虽然目前来说,此代码还有些粗糙,但对于美化列表的样式来说,可能以后会更方便,要比Select方便的多. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-fselect-codes/ 具体代码如下: <!DOCTYPE

Bootstrap CSS布局之表单_javascript技巧

1. 表单 表单是html网页交互很重要的部分,同时也是BootSTrap框架中的核心内容,表单提供了丰富的样式(基础.内联.横向) 表单的元素 input textarea select checkbox radio(checkbox和radio是input的特殊类型) 其他标签 form fieldset legend 1.1.基础表单 <!--基础表单: 1.向父 <form> 元素添加 role="form". 2.把标签label和控件放在一个带有 clas

Symfony2框架学习笔记之表单用法详解_php实例

本文实例讲述了Symfony2框架表单用法.分享给大家供大家参考,具体如下: 对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将 从基础开始创建一个复杂的表单,学习表单类库中最重要的内容. Symfony2 的Form组件是一个独立的类库,你可以在Symfony2项目之外使用它. 创建一个简单的表单: 假设你要创建一个应用程序的todo列表,需要显示一些任务.因为你的用户需要编辑和创建任务,所

解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象

原文:解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象 之前开发时遇到的一个问题,使用easyui的form提交表单,在Chrome下时没问题的,但是在IE下出现类似附件下载时提示是否保存的现象. 这里记录一下如何解决的.其实这个现象不光是easyui的form,还有其他一些form插件也是一样的,使用不当就会遇到这个问题.   前台: <!DOCTYPE html> <html> <head> <meta http-equi

编辑器-form表单通过360浏览器提交数据,controller获取不到参数

问题描述 form表单通过360浏览器提交数据,controller获取不到参数 我做了一个小DEMO,进行新闻的CRUD,用的是ueditor,测试的时候,IE可以显示数据, 火狐也可以,chrome也行,但是有时候点击"编辑新闻"时,编辑器里是空白,时有时无, 360浏览器就一直是空白,我看了一下MyEclipse控制台,是因为没获取页面提交的数据. 希望求大神解决啊!!! 解决方案 360你使用的是兼容模式还是急速模式?兼容模式是ie内核(默认好像是ie7内核..并不是系统最高版

Ext form表单加载时 下拉框取值的问题

问题描述 Ext form表单加载时 加载的数据 后台传的的是id号,下拉框匹配的时候匹配当该id的name可是现在有个问题,当表单加载完成 下拉框的数据还没加载完成 这时下拉框显示的id,不是name只有当下拉框数据源先加载完 表单数据后加载完 才显示的是name.....有人说 给下拉框数据源添加 load事件 在load事件方法里面 给组件赋值:Ext.getCmp("组件Id").set(value).可是这个value 是form表单里jsonreade里的 我怎么能方便的取

段正淳的css笔记(6)-浅谈css框架开发

个人总结了在开发css框架中的一点经验,献丑了.希望大家的讨论能使我们共同进步.:) 1.css框架 中国的互联网行业已经发展了10年,浏览器也从最早流行的NS到现在的FF3.IE7等等--前端开发工程师的职位也诞生了.近几年在web开发中,有个非常火的词--"框架".YUI.JQuery.Prototype这些javascript框架在开发网站时,确实成为前端开发工程师的手中利器.为什么呢?因为框架是包含工具.函数库.约定,以及尝试从常用任务中抽象出可以复用的通用模块,让设计师与程序

js+css实现增加表单可用性之提示文字_javascript技巧

平常设计表单的时候,我们会加入一些提示文字,比如说在搜索框里,我们会提示"请输入关键字",并在搜索框得到焦点和失去焦点的时候适时的隐藏和显示,最常见的做法是利用value来设置: 复制代码 代码如下: <form id="search"> <input type="text" id="keyword" name="keyword" value="请输入关键字">

段正淳的css笔记(5)

一天大家在团队中讨论"未知图片垂直居中"的问题,突发奇想用vertical-align:middle这个属性来实现,于是抽了时间做了下面这个不成熟的例子: CSS: div{ width:140px; height:140px; text-indent:-8px; text-align:center; line-height:138px; background:red; font-size:12px; *font-size:120px; *text-indent:-60px; } im