网页表单在浏览器的表现实例

2016-02-19 23:15 8 1 收藏

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享网页表单在浏览器的表现实例教程,希望对大家能有一点小小的帮助。

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

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

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

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

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

来源:http://www.tulaoshi.com/n/20160219/1629528.html

延伸阅读
KK浏览器如何分享网页   KK浏览器如何分享网页?小伙伴们在浏览器上看到一些比较有内涵的网页或者对自己朋友有用处的网页肯定会分享给好友吧?但是浏览器怎么分享给好友你们知道知道吗?不知道也没关系,现在小编就教小伙伴们KK浏览器如分享网页。 1)点击打开然后点击上方的编辑框输入你想要打开的网页; 2)打开网页...
标签: 浏览器
UC浏览器如何保存网页   第一步 打开UC浏览器,在底部的功能条的正中间找到菜单,这是可以看到一些选项了,但是还不在这一页,向左滑动切换到第二页。 第二步 看到第二页第一个选项插件了吧!保存网页的功能就在这里面。打开它! 咦,怎么没看到呢?原来插件里只有UC默认的几个最常用的功能,如果想要更多的插件...
悟空浏览器怎么分享网页   悟空浏览器怎么分享网页?小伙伴们用浏览器查看资料的时候看到某些有趣的网页应该都会分享给好友看吧?那么小伙伴们知道怎么分享给好友吗?不知道也没关系,现在小编就教小伙伴们悟空浏览器怎么分享网页。 1)点击打开然后点击右上角的尼想要分享你想要分享到网页; 2)点击下方中间的然后点...
标签: Web开发
过去我们常被dreamweaver的表格的自动伸缩搞的头痛不已,对Fontpage能够随意的画表格而感到羡慕。但现在在dreamweaver4中,这一切都变的非常的简单。 dreamweaver4提供了两种视图,布局视图和标准视图。如果你认为你已经能够控制dreamweaver的表格,那么你可以在你熟悉的标准视图中工作,如果你很喜欢Fontpage的画表格功能,那么在布局视图中...
标签: 软件教程
目前在我们使用的众多浏览器中,基本都实现了网页翻译。对与英语不好的童鞋来说这是一个很好的工具,下面小编就为大家介绍一下谷歌浏览器翻译网页的设置方法

经验教程

658

收藏

61
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部