仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 768|回复: 7
打印 上一主题 下一主题

[DIV+CSS] CSS教程之CSS网页计划技能:input按钮在IE扫瞄器的兼容成绩

[复制链接]
分手快乐 该用户已被删除
跳转到指定楼层
#
发表于 2015-1-15 23:11:04 | 只看该作者 回帖奖励 |正序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。
破洛洛文章简介:CSS网页计划技能:input按钮在IE扫瞄器的兼容成绩。
这段工夫在处置网页默许的input按钮时,IE下常展现纷歧致的宽度成绩,让人感应很纠结。以是明天就教了几位妙手把这个成绩办理了,如今贴出来和人人共享一下,固然这个办法在网上曾有人写过,人人能够一同来互相切磋一下。
HtmlCode:

<inputtype="submit“;class="form-submit"value="subscribe"name="op"id="edit-submit"/>
我先在这里贴出一段初始的CSS款式
CSSCode:

input.form-submit{
border-radius:3px;//FF下的完成圆角
-webkit-border-radius:3px;//Safari,Chrome下完成圆角
border:1pxsolid#469021;
background:#64A246;
color:#fff;
font:bold11pxarial,sans-serif;
padding:0.25em0.5em;
text-transform:uppercase;
}
我看先来看看最终效果吧:
从上图中我们分明能够看出,只要在Firefox下显现才是一般,在IE7和IE下没有圆角效果,这个都是尽人皆知,但IE7具有一个致命的成绩,就是宽度变长了,人人必定会感应奇异,我们没有定宽度的呀,怎样会如许呢?呆会我们会援用他人的说法了申明这个成绩;别的就是Safari和Chrome下高度怎样也不可的呀。
就是由于如许的成绩,我纠结了一个下战书,但在高人的指导下,仍是找到了相干的办理举措,如今我们一同来看看高人是怎样办理如许的兼容成绩。在IE7下会跟着笔墨的增添招致文本间隔按钮摆布两侧的间距愈来愈年夜,如许就招致了上图中所看到的效果,但该成绩存在于IE6/IE7,FF、IE8和Opera10没发明相似成绩。关于另外一情形,小生至今还没有弄分明为何在Safari和Chrome下会呈现高度成绩,还但愿列位先辈和妙手指导。
针对后面的Bug,我对我的CSS略加做了修正,以下:
input.form-submit{
-webkit-border-radius:3px;
border-radius:3px;
border:1pxsolid#469021;
background:#64A246;
color:#fff;
font:bold11pxarial,sans-serif;
padding:0.25em0.5em;
text-transform:uppercase;
height:27px;
line-height:19px;
margin:0;
overflow:visible;
width:auto;
*width:1;
}
也就是我在之前的基本上增添了以下几行代码

input.form-submit{
height:27px;//设置行高是为懂得决Safari和Chrome下的高度成绩
line-height:19px;//让笔墨居中显现
margin:0;
overflow:visible;//只要设置这个属性IE下padding才干失效
width:auto;//古代扫瞄器下辨认
*width:1;//IE7和IE6辨认,设置值为1,我也不晓得有何感化,但有些人此处设置值为0
}
如许我们就把谁人头痛的成绩办理了,人人能够一同看看修正后的效果:
这里提示人人,关于字居中的成绩,不但受行高影响,并且还受其字体,字号的影响,人人感乐趣的能够实验一下。
</p>
所有的设计第一步就是构思,构思好了。
精灵巫婆 该用户已被删除
7#
发表于 2015-3-21 12:13:13 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
飘灵儿 该用户已被删除
6#
发表于 2015-3-14 14:54:05 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
小魔女 该用户已被删除
5#
发表于 2015-3-7 05:38:37 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
爱飞 该用户已被删除
地板
发表于 2015-2-22 22:35:31 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
山那边是海 该用户已被删除
板凳
发表于 2015-2-7 17:49:07 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
再现理想 该用户已被删除
沙发
发表于 2015-2-1 23:37:10 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
老尸 该用户已被删除
楼主
发表于 2015-1-17 20:10:11 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-11-17 08:05

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表