HTML表单设计提示 - 文本输入元素的字体大小 - IE7 vsFirefox [英] HTML form design tip - font size of text input elements - IE7 vsFirefox
问题描述
大家好;
我和其他人一样，对设计
表单感到沮丧，这些表单在IE和Firefox中看起来和流程都相同。 br />
他们根本没有扩展相同。
我发现，令我懊恼的是，IE7似乎没有提供
来提供任何控制文本输入字体大小的方法
元素。
Firefox正确继承文本输入的字体大小
$ b来自其容器的$ b。在IE7中，似乎只有一个
字体可用，即11pt。
以下CSS规则适用于FireFox但不适用于IE7
INPUT [type =" text"] {font-size：10pt}
在上面的行中插入任何值。 IE7只是忽略它。
所以现在我的设计实践是将
文本输入元素的字体大小设置为11pt。
两个浏览器之间至少输入
元素的大小将更加相似。
FWIW，我可以很快就会看到M $修复这个''bug''。他们使用缩放位图图像的b'缩放功能，而不是增加字体大小的优雅解决方案是
$ b $恕我直言，看起来非常蹩脚和傻。
这是一个CSS *流体*表格的网页链接。使用上面提到的
样式规则，表单看起来和流程
在两个浏览器中几乎相同。拿出那个规则
out并比较差异。
http://68.147.176.113/calgarydj/even...0ee29ce4f5ace9
以下是一些HTML源代码形式让你切割，粘贴和愚弄你的b $ b。
================== ================================ =================
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 Transitional // EN">
< html> ;
< head>
< title>流体形式示例< / title>
< meta name =" author" content =" Jim Sontag" />
< meta name =" description" content ="样本流体形式使用
CSS" />
< style type =" text / css">
<！ -
BODY {font-family ： 无衬线字体; font-size：10pt}
FIELDSET {padding：4px;保证金：8px; }
LABEL {float：left;明确：无;保证金权利：8px; }
LABEL {font-size：80％; font-style：italic; }
LEGEND {font-weight：700; font-style：italic}
INPUT [type =" text"] {font-size：11pt}
..lside {向左飘浮;清楚：左;宽度：50％; }
..rside {float：left;明确：对;宽度：50％; }
..title1 {font-size：150％;字体样式：斜体; padding-right：8px}
..title2 {font-size：110％;字体样式：斜体; padding-right：8px}
..tstmp {font-style：italic; line-height：1.5em;
padding-right：8px}
..glabel {margin-left：3ex}
..glabel LABEL {font-size：90％; font-style：italic;
text-indent：-3ex; }
..glabel {white-space：normal}
/ * stupid microsoft fixes * /
* html .glabel {margin-left：0}
* html .glabel LABEL {text-indent：0}
#dbtn {display：none}
..sbtn {float：right}
#ctrl {display：none}
#newPrice {clear：both; padding-top：1ex; }
- >
< / style>
< / head>
< body> ;
< form class =" dj" ID = QUOT;预订" action =" event.php"
method =" post" onsubmit =" return validate（）">
< fieldset>< legend>活动信息< / legend>
< div< ; - - IE需要 - >
< div class =" lside">
< span class =" title1"> Dave Black< / span>< br /< span
class =" title2"> 2006年12月19日星期二< br />> 8：00到
凌晨1点（5点）< / span>< br />
< / div<！ - lside div结束 - >
< div class =" rside" style =" text-align：right">
< span class =" title1">我们的价格：700美元< br />< / span>
< span class =" tstmp">上次更新时间：2月24日星期六 -
3:13 pm< / span>< br />
< a
href =" /calgarydj/event.php?page = 0d94c81bc43bb777200ee29ce4f5ace9"> R efresh< / a>
< / div<！ - 结尾的div - >
< div id =" newPrice">< / div>< br />
< / div>
< fieldset id =" ctrl" style =" float：left; clear：left">
< legend> Control< / legend>
< label>
type< br />
< input readonly type =" hidden"名称= QUOT;类型" size =" 6"
value =" booking" />
< / label>
< label>
idx< br />
< input readonly type =" hidden"命名= QUOT; IDX" size =" 1"
maxlength =" 4"值= QUOT; -1" />
< / label>
< label>
pkey< br />
< input readonly type =" hidden"名称= QUOT; p键" size =" 2"
maxlength =" 4"值= QUOT 1 QUOT; />
< / label>< / fieldset>
< div id =" jim">
< div class =" lside" style =" clear：both">
< fieldset>< legend>联系信息< / legend>
< div style =" ; float：left; clear：none">
< label>名称< br />
< input type =" text"命名= QUOT;名称"大小= QUOT; 32" maxlength =" 32"
value =" Dave Black" />
< / label>
< label style =" clear：left">电子邮件< br />
< input type =" text"名称= QUOT;电子邮件"大小= QUOT; 32" maxlength =" 40"
value =" da ***************** @ www.calgarydj.ca" />
< / label>
< / div>
< div style =" float： left; clear：none">
< label>电话（主要）< br />
< input type =" text" ;名称= QUOT; PHONE1"大小= QUOT 13 QUOT; maxlength =" 13"
value =" 403 123-4567" />
< / label>
< label style =" clear：left"> Phone& nbsp;（alternate）< br />
< input type =" text"名称= QUOT; PHONE2"大小= QUOT 13 QUOT; maxlength =" 13"
value =" 403 765-4321" />
< / label>
< / div>
< label>
地址< br />
< input type =" text"名称= QUOT; ADDR1" size =" 32"
maxlength =" 32" value =" 123 Mockingbird Lane NW" />< br />
< input type =" text"名称= QUOT; ADDR2" size =" 32"
maxlength =" 32"值= QUOT;" />
< / label>
< div style =" float：none; clear：both">
< label style =" clear：both">
City< br />
< input type =" text"命名= QUOT;城市"大小= QUOT; 15" maxlength =" 20"
value =" Calgary" />
< / label>
< label>
Prov< br />
< input type =" text"名称= QUOT;省"大小= QUOT; 4英寸maxlength =" 20"
value =" AB" />
< / label>
< label>
邮政编码< br />
< input type =" text"名称= QUOT;邮编" size =" 9"
maxlength =" 9" value =" T2M 0X5" />
< / label>& nbsp;
< / div>
< / fieldset>
< fieldset>
< legend>时间& amp;地点< / legend>
< label>地点名称< br />
< input type =" text"名称= QUOT;场地"大小= QUOT; 30英寸; maxlength =" 32"
value ="" />
< / label>
< label>
起始< br />
< select name =" stime"平变化= QUOT; PCALC（）" < option
value =" 12:30"> 12:30< / option>
< option value =" 13:00"> 1 ：00< / option>
< option value =" 13：30"> 1：30< / option>
< option value =" 14 ：00"> 2:00< / option>
< option value =" 14:30"> 2:30< / option>
< option value =" 15:00"> 3:00< / option>
< option value =" 15:30"> 3:30< / option>
< option value =" 16：00"> 4：00< / option>
< option value =" 16：30"> 4 ：30< / option>
< option value =" 17：00"> 5:00< / option>
<选项值=" 17:30"> 5:30< / option>
< option value =" 18:00"> 6:00< / option>
< option value =" 18:30"> 6:30< / option>
< option value =" 19:00"> 7:00< / option>
< opti on value =" 19:30"> 7:30< / option>
< option selected value =" 20：00"> 8:00< / option>
< option value =" 20：30"> 8:30< / option>
< option value =" 21：00"> 9:00< / option>
< option value =" 21：30"> 9:30< / option>
< option value =" 22:00>> 10:00< / option>
< option value =" 22:30"> 10:30< / option>
< ;选项值=" 23：00"> 11:00< / option>
< option value =" 23：30"> 11：30< / option> ;
< option value =" 00：00"> 00：00 am< / option>
< option value =" 00：30"> 12:30 am< /option>
< option value =" 01：00"> 1:00 am< / option>
< option value =" 01:30>>凌晨1点30分< / option>
< option value =" 02：00"> 2:00 am< / option>
< / select>
<！ - < input type =" text"名称= QUOT; STIME" size =" 6"
value =" 20:00" / - >
< / label>
< label>
结束< br />
< select name =" etime"平变化= QUOT; PCALC（）" < option
value =" 12:30"> 12:30< / option>
< option value =" 13:00"> 1 ：00< / option>
< option value =" 13:30"> 1：30< / option>
<选项值=" 14:00"> 2:00< / option>
< option value =" 14:30"> 2:30< / option>
< option value =" 15:00"> 3:00< / option>
< option value =" 15:30"> 3:30< / option>
< option value =" 16：00"> 4:00< / option>
< option value =" 16:30" ;> 4:30< / option>
< option value =" 17:00"> 5:00< / option>
<期权值=" 17:30"> 5:30< / option>
< option value =" 18:00"> 6:00< / option>
< option value =" 18:30"> 6:30< / option>
< option value =" 19:00"> 7:00< / option>
& lt; option value =" 19:30"> 7:30< / option>
< option value =" 20：00"> 8:00< / option>
< option value =" 20：30"> 8:30< / option>
< option value =" 21：00"> 9:00< ; / option>
< option value =" 21：30"> 9:30< / option>
< option value =" 22:00" ;> 10:00< / option>
< option value =" 22：30"> 10:30< / option>
< option value =" 23:00"> 11:00< / option>
< option value =" 23：30"> 11：30< / option>
< option value =" 00：00"> 12：00 am< / option>
< option value =" 00：30"> 12:30 am<t ; / option>
< option selected value =" 01：00"> 1:00 am< / option>
< option value = < 01：30"> 1:30 am< / option>
< option value =" 02：00"> 2:00 am< / option>
< / select>
<！ - < input type =" text"名称= QUOT; ETIME" size =" 6"
value =" 01：00" / - >
< / label>
< label>地址< br />
< input type =" text"名称= QUOT;街道"大小= QUOT; 30英寸; maxlength =" 32"
value =" 123 mockingbird lane" />
< / label>
< div class =" glabel" style =" clear：left">
< label style =" margin-top：1ex">
< input type =" checkbox"名称= QUOT; INTOWN" value =" true"
onclick =" pcalc（）" />
如果场地位于城市之外，请点击此处。
< / label>
< label style =" margin-top：6px; float：right">
如果是，距离城市范围的距离是多少？
< select name =" travel" onchange =" pcalc（）">
< option value =" 20"> 0-20 km< / option>
< option value =" 40"> 20-40km< / option>
< option value =" 60"> 40-60km< / option>
< option value =" 80"> 60-80km< / option>
< option value =" 100"> 80-100km< / option>
<期权选择值=" 200">超过100公里< /选项>
< / select>
< /标签>
< div style =" clear：both; padding-top：6px">
< label>
< input type ="复选框" name =" earlySetup"
value =" true"的onclick = QUOT; PCALC（）" />
您是否需要我们在当天早些时候进行设置？
（设置通常发生在您要求的前一小时
开始时间）
< / label>
< label style =" float：right">
如果是，早期设置时间
< select name =" earlySetupTime" onchange =" pcalc（）">
<！ - < input name =" earlySetupTime" type =" text"
value =" 20:00"大小= QUOT; 6英寸MAXLENGTH = QUOT; 6英寸/ - < option
value =" 12：30"> 12:30< / option>
< option value =" 13:00<> 1：00< / option>
< option value =" 13：30"> 1：30< / option>
< ;选项值=" 14:00"> 2：00< / option>
< option value =" 14:30"> 2:30< / option>
< option value =" 15:00"> 3：00< / option>
< option value =" 15：30"> 3:30< / option>
< option value =" 16:00"> 4:00< / option>
< option value =" 16:30>> 4:30< / option>
< option value =" 17:00"> 5:00< / option>
< ;选项值=" 17:30"> 5:30< / option>
< option value =" 18:00"> 6:00< / option>
< option value =" 18:30"> 6:30< / option>
< option value =" 19:00"> 7:00< / option>
< option value =" 19:30"> 7:30< / option>
< option selected value =" 20：00"> 8:00< / option>
< option value =" 20：30"> 8:30< / option>
< option value =" 21:00" > 9:00< / option>
< option value =" 21：30"> 9:30< / option>
< ;选项值=" 22：00"> 10:00< / option>
< option value =" 22：30"> 10:30< / option>
< option value =" 23：00"> 11:00< / option>
< option value =" 23：30"> 11:30< / option>
< option value =" 00：00"> 00：00 am< / option>
< option value =" 00：30" > 12：30 am< / option>
< option value =" 01：00"> 1：00 am< / option>
< ; option value =" 01:30"> 1:30 am< / option>
< option value =" 02：00"> 2:00 am< / option>
< / select>
< / label& nbsp;
< / div>
< / div>
< / fieldset>
< / div<！ - lside div的结尾 - >
< div class =" rside">
< fieldset>
< legend>晚餐音乐< / legend>
< div class =" glabel">
< label>
< input type =" ;无线电"名称= QUOT; dinnerMusic" value =" recorded"
onclick =" pcalc（）" />录制的音乐（每小时50美元）
< / label>
< br style =" clear：both />
< label>
< input checked type =" radio" name =" dinnerMusic"
value =" guitar"的onclick = QUOT; PCALC（）" />现场古典吉他
（$ 150 / hr）
< / label>
< br style =" clear：both" ; />
< label>
< input type =" radio"名称= QUOT; dinnerMusic" value =" piano"
onclick =" pcalc（）" />现场古典钢琴（150美元/小时）
< / label>
< br style =" clear：both />
< label>
< input type =" radio"名称= QUOT; dinnerMusic" value =" none"
onclick =" pcalc（）" />没有晚餐音乐
< / label>
< / div>
< / fieldset>
< fieldset>
< legend>声音增强< / legend>
请选择您感兴趣的以下任何其他内容
< div class =" glabel">
< label>
< input checked type ="复选框" name =" wireless"
value =" true"的onclick = QUOT; PCALC（）" />无线麦克风（50美元）
< / label>
< br style =" clear：both" />
< label>
< input checked type ="复选框" name =" lights"
value =" true"的onclick = QUOT; PCALC（）" />升级后的照明系统（100美元）
< / label>
< br style =" clear：both" />
< label>
< input type ="复选框"名称= QUOT; bigSound" value =" true"
onclick =" pcalc（）" />升级的音响系统
-推荐用于< b> 200& nbsp; +< / b（$ 100）的团体
< / label>
< br style =" clear：both />
< label>
< input type ="复选框"名称= QUOT;高级" value =" true"
onclick =" pcalc（）" />
高级DJ - 我们最受欢迎的DJ（50美元）
< / label>
< / div>
< / fieldset>
< fieldset>
< legend>记事本< / legend>
< textarea rows =" 4" COLS = QUOT; 28" name =" notepad">嘿
nee ner
nee ner ner
< / textarea>
< / fieldset>
< / div<！ - 结尾的div - >
< / div>
< br style =" clear：both />
< input type =" submit" ID = QUOT; dbtn" />
< / fieldset>
< / form>
< / body>
< / html>
Hi All;
I, like others, have been frustrated with designing
forms that look and flow the same in both IE and Firefox.
They simply did not scale the same.
I have discovered, to my chagrin, that IE7 does not seem
to offer any way to control the font size of a text input
element.
Firefox properly inherits the font-size for the text input
from its container. In IE7, there seems to be only one
font-size available, that being 11pt.
The following CSS rule works in FireFox but not in IE7
INPUT[type="text"] { font-size: 10pt }
Plug in any value in the above line. IE7 simply ignores it.
So now my design practice will be to the to set the
text input element font-size to 11pt. At least the input
element sizes will be much more similar in size between the
two browsers.
FWIW, I can''t see M$ fixing this ''bug'' anytime soon. Their
''zoom'' feature of scaling a bitmap image as opposed to the
more elegant solution of incrementing the font-size is,
IMHO, pretty lame and goofy looking.
Here is a web link to a CSS *fluid* form. With the
style rule mentioned above, the form looks and flows
pretty much the same in both browsers. Take that rule
out and compare the difference.
http://68.147.176.113/calgarydj/even...0ee29ce4f5ace9
Here is some of the HTML source from the same form to let
you cut, paste, and fool around.
================================================== =================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Fluid form example</title>
<meta name="author" content="Jim Sontag" />
<meta name="description" content="sample fluid form using
CSS" />
<style type="text/css">
<!--
BODY { font-family: sans-serif; font-size: 10pt }
FIELDSET { padding: 4px; margin: 8px; }
LABEL { float: left; clear: none; margin-right: 8px; }
LABEL { font-size: 80%; font-style: italic; }
LEGEND { font-weight: 700; font-style: italic }
INPUT[type="text"] { font-size: 11pt }
..lside { float: left; clear: left; width: 50%; }
..rside { float: left; clear: right; width: 50%; }
..title1 { font-size:150%; font-style:italic; padding-right:8px }
..title2 { font-size:110%; font-style:italic; padding-right:8px }
..tstmp { font-style: italic; line-height: 1.5em;
padding-right:8px }
..glabel { margin-left: 3ex }
..glabel LABEL { font-size: 90%; font-style: italic;
text-indent: -3ex; }
..glabel { white-space: normal }
/* stupid microsoft fixes */
* html .glabel { margin-left: 0 }
* html .glabel LABEL { text-indent: 0 }
#dbtn { display: none }
..sbtn { float: right }
#ctrl { display: none }
#newPrice { clear: both; padding-top: 1ex; }
-->
</style>
</head>
<body>
<form class="dj" id="booking" action="event.php"
method="post" onsubmit="return validate()">
<fieldset><legend>Event Information</legend>
<div <!-- needed for IE -->
<div class="lside">
<span class="title1">Dave Black</span><br / <span
class="title2">Tuesday, December 19, 2006 <br />8:00pm to
1:00am (5:00 hours)</span><br />
</div<!-- end of lside div -->
<div class="rside" style="text-align:right">
<span class="title1">Our price : $700<br /></span>
<span class="tstmp">Last updated: Sat, Feb 24 -
3:13pm</span><br />
<a
href="/calgarydj/event.php?page=0d94c81bc43bb777200ee29ce4f5ace9">R efresh</a>
</div<!-- end of rside div -->
<div id="newPrice"></div><br />
</div>
<fieldset id="ctrl" style="float:left;clear:left">
<legend>Control</legend>
<label>
type<br />
<input readonly type="hidden" name="type" size="6"
value="booking" />
</label>
<label>
idx<br />
<input readonly type="hidden" name="idx" size="1"
maxlength="4" value="-1" />
</label>
<label>
pkey<br />
<input readonly type="hidden" name="pkey" size="2"
maxlength="4" value="1" />
</label></fieldset>
<div id="jim">
<div class="lside" style="clear:both">
<fieldset><legend>Contact information</legend>
<div style="float:left;clear:none">
<label>Name<br />
<input type="text" name="name" size="32" maxlength="32"
value="Dave Black" />
</label>
<label style="clear:left">e-mail<br />
<input type="text" name="email" size="32" maxlength="40"
value="da*****************@www.calgarydj.ca" />
</label>
</div>
<div style="float:left;clear:none">
<label>Phone (primary)<br />
<input type="text" name="phone1" size="13" maxlength="13"
value="403 123-4567" />
</label>
<label style="clear:left">Phone (alternate)<br />
<input type="text" name="phone2" size="13" maxlength="13"
value="403 765-4321" />
</label>
</div>
<label>
Address<br />
<input type="text" name="addr1" size="32"
maxlength="32" value="123 Mockingbird Lane NW" /><br />
<input type="text" name="addr2" size="32"
maxlength="32" value="" />
</label>
<div style="float:none;clear:both">
<label style="clear:both">
City<br />
<input type="text" name="city" size="15" maxlength="20"
value="Calgary" />
</label>
<label>
Prov<br />
<input type="text" name="prov" size="4" maxlength="20"
value="AB" />
</label>
<label>
Postal Code<br />
<input type="text" name="postalCode" size="9"
maxlength="9" value="T2M 0X5" />
</label>
</div>
</fieldset>
<fieldset>
<legend>Time & Place</legend>
<label>Venue name<br />
<input type="text" name="venue" size="30" maxlength="32"
value="" />
</label>
<label>
starting<br />
<select name="stime" onchange="pcalc()" <option
value="12:30">12:30</option>
<option value="13:00">1:00</option>
<option value="13:30">1:30</option>
<option value="14:00">2:00</option>
<option value="14:30">2:30</option>
<option value="15:00">3:00</option>
<option value="15:30">3:30</option>
<option value="16:00">4:00</option>
<option value="16:30">4:30</option>
<option value="17:00">5:00</option>
<option value="17:30">5:30</option>
<option value="18:00">6:00</option>
<option value="18:30">6:30</option>
<option value="19:00">7:00</option>
<option value="19:30">7:30</option>
<option selected value="20:00">8:00</option>
<option value="20:30">8:30</option>
<option value="21:00">9:00</option>
<option value="21:30">9:30</option>
<option value="22:00">10:00</option>
<option value="22:30">10:30</option>
<option value="23:00">11:00</option>
<option value="23:30">11:30</option>
<option value="00:00">12:00am</option>
<option value="00:30">12:30am</option>
<option value="01:00">1:00am</option>
<option value="01:30">1:30am</option>
<option value="02:00">2:00am</option>
</select>
<!-- <input type="text" name="stime" size="6"
value="20:00"/-->
</label>
<label>
ending<br />
<select name="etime" onchange="pcalc()" <option
value="12:30">12:30</option>
<option value="13:00">1:00</option>
<option value="13:30">1:30</option>
<option value="14:00">2:00</option>
<option value="14:30">2:30</option>
<option value="15:00">3:00</option>
<option value="15:30">3:30</option>
<option value="16:00">4:00</option>
<option value="16:30">4:30</option>
<option value="17:00">5:00</option>
<option value="17:30">5:30</option>
<option value="18:00">6:00</option>
<option value="18:30">6:30</option>
<option value="19:00">7:00</option>
<option value="19:30">7:30</option>
<option value="20:00">8:00</option>
<option value="20:30">8:30</option>
<option value="21:00">9:00</option>
<option value="21:30">9:30</option>
<option value="22:00">10:00</option>
<option value="22:30">10:30</option>
<option value="23:00">11:00</option>
<option value="23:30">11:30</option>
<option value="00:00">12:00am</option>
<option value="00:30">12:30am</option>
<option selected value="01:00">1:00am</option>
<option value="01:30">1:30am</option>
<option value="02:00">2:00am</option>
</select>
<!-- <input type="text" name="etime" size="6"
value="01:00"/-->
</label>
<label>Address<br />
<input type="text" name="street" size="30" maxlength="32"
value="123 mockingbird lane" />
</label>
<div class="glabel" style="clear:left">
<label style="margin-top:1ex">
<input type="checkbox" name="inTown" value="true"
onclick="pcalc()" />
Check here if the venue is outside of the city.
</label>
<label style="margin-top:6px;float:right">
If yes, distance from city limits?
<select name="travel" onchange="pcalc()">
<option value="20">0-20 km</option>
<option value="40">20-40km</option>
<option value="60">40-60km</option>
<option value="80">60-80km</option>
<option value="100">80-100km</option>
<option selected value="200">Over 100km</option>
</select>
</label>
<div style="clear:both;padding-top:6px">
<label>
<input type="checkbox" name="earlySetup"
value="true" onclick="pcalc()" />
Do you need us to set up earlier in the day?
(setup normally happens 1 hour before your requested
start time)
</label>
<label style="float:right">
If yes, early setup time
<select name="earlySetupTime" onchange="pcalc()">
<!-- <input name="earlySetupTime" type="text"
value="20:00" size="6" maxlength="6" /-- <option
value="12:30">12:30</option>
<option value="13:00">1:00</option>
<option value="13:30">1:30</option>
<option value="14:00">2:00</option>
<option value="14:30">2:30</option>
<option value="15:00">3:00</option>
<option value="15:30">3:30</option>
<option value="16:00">4:00</option>
<option value="16:30">4:30</option>
<option value="17:00">5:00</option>
<option value="17:30">5:30</option>
<option value="18:00">6:00</option>
<option value="18:30">6:30</option>
<option value="19:00">7:00</option>
<option value="19:30">7:30</option>
<option selected value="20:00">8:00</option>
<option value="20:30">8:30</option>
<option value="21:00">9:00</option>
<option value="21:30">9:30</option>
<option value="22:00">10:00</option>
<option value="22:30">10:30</option>
<option value="23:00">11:00</option>
<option value="23:30">11:30</option>
<option value="00:00">12:00am</option>
<option value="00:30">12:30am</option>
<option value="01:00">1:00am</option>
<option value="01:30">1:30am</option>
<option value="02:00">2:00am</option>
</select>
</label
</div>
</div>
</fieldset>
</div<!-- end of lside div -->
<div class="rside">
<fieldset>
<legend>Dinner Music</legend>
<div class="glabel">
<label>
<input type="radio" name="dinnerMusic" value="recorded"
onclick="pcalc()" />Recorded music ($50/hr)
</label>
<br style="clear:both" />
<label>
<input checked type="radio" name="dinnerMusic"
value="guitar" onclick="pcalc()" />Live classical guitar
($150/hr)
</label>
<br style="clear:both" />
<label>
<input type="radio" name="dinnerMusic" value="piano"
onclick="pcalc()" />Live classical piano ($150/hr)
</label>
<br style="clear:both" />
<label>
<input type="radio" name="dinnerMusic" value="none"
onclick="pcalc()" />No dinner music
</label>
</div>
</fieldset>
<fieldset>
<legend>Sound Enhancement </legend>
Please select any of the following extras you are interested in
<div class="glabel">
<label>
<input checked type="checkbox" name="wireless"
value="true" onclick="pcalc()" />Wireless microphone ($50)
</label>
<br style="clear:both" />
<label>
<input checked type="checkbox" name="lights"
value="true" onclick="pcalc()" />Upgraded lighting system ($100)
</label>
<br style="clear:both" />
<label>
<input type="checkbox" name="bigSound" value="true"
onclick="pcalc()" />Upgraded sound system
-recommended for groups of <b>200 +</b($100)
</label>
<br style="clear:both" />
<label>
<input type="checkbox" name="senior" value="true"
onclick="pcalc()" />
Premium DJ -our most expereinced DJs ($50)
</label>
</div>
</fieldset>
<fieldset>
<legend>Notepad</legend>
<textarea rows="4" cols="28" name="notepad">hey
nee ner
nee ner ner
</textarea>
</fieldset>
</div <!-- end of rside div -->
</div>
<br style="clear:both" />
<input type="submit" id="dbtn" />
</fieldset>
</form>
</body>
</html>
推荐答案
随时修复此错误。他们使用缩放位图图像的b'缩放功能，而不是增加字体大小的优雅解决方案是
$ b $恕我直言，看起来非常蹩脚和傻。
这是一个CSS *流体*表格的网页链接。使用上面提到的
样式规则，表单看起来和流程
在两个浏览器中几乎相同。拿出那个规则
out并比较差异。
http://68.147.176.113/calgarydj/even...0ee29ce4f5ace9
以下是一些HTML源代码形式让你切割，粘贴和愚弄你的b $ b。
================== ================================ =================
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 Transitional // EN">
< html> ;
< head>
< title>流体形式示例< / title>
< meta name =" author" content =" Jim Sontag" />
< meta name =" description" content ="样本流体形式使用
CSS" />
< style type =" text / css">
<！ -
BODY {font-family ： 无衬线字体; font-size：10pt}
FIELDSET {padding：4px;保证金：8px; }
LABEL {float：left;明确：无;保证金权利：8px; }
LABEL {font-size：80％; font-style：italic; }
LEGEND {font-weight：700; font-style：italic}
INPUT [type =" text"] {font-size：11pt}
..lside {向左飘浮;清楚：左;宽度：50％; }
..rside {float：left;明确：对;宽度：50％; }
..title1 {font-size：150％;字体样式：斜体; padding-right：8px}
..title2 {font-size：110％;字体样式：斜体; padding-right：8px}
..tstmp {font-style：italic; line-height：1.5em;
padding-right：8px}
..glabel {margin-left：3ex}
..glabel LABEL {font-size：90％; font-style：italic;
text-indent：-3ex; }
..glabel {white-space：normal}
/ * stupid microsoft fixes * /
* html .glabel {margin-left：0}
* html .glabel LABEL {text-indent：0}
#dbtn {display：none}
..sbtn {float：right}
#ctrl {display：none}
#newPrice {clear：both; padding-top：1ex; }
- >
< / style>
< / head>
< body> ;
< form class =" dj" ID = QUOT;预订" action =" event.php"
method =" post" onsubmit =" return validate（）">
< fieldset>< legend>活动信息< / legend>
< div< ; - - IE需要 - >
< div class =" lside">
< span class =" title1"> Dave Black< / span>< br /< span
class =" title2"> 2006年12月19日星期二< br />> 8：00到
凌晨1点（5点）< / span>< br />
< / div<！ - lside div结束 - >
< div class =" rside" style =" text-align：right">
< span class =" title1">我们的价格：
fixing this ''bug'' anytime soon. Their
''zoom'' feature of scaling a bitmap image as opposed to the
more elegant solution of incrementing the font-size is,
IMHO, pretty lame and goofy looking.
Here is a web link to a CSS *fluid* form. With the
style rule mentioned above, the form looks and flows
pretty much the same in both browsers. Take that rule
out and compare the difference.
http://68.147.176.113/calgarydj/even...0ee29ce4f5ace9
Here is some of the HTML source from the same form to let
you cut, paste, and fool around.
================================================== =================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Fluid form example</title>
<meta name="author" content="Jim Sontag" />
<meta name="description" content="sample fluid form using
CSS" />
<style type="text/css">
<!--
BODY { font-family: sans-serif; font-size: 10pt }
FIELDSET { padding: 4px; margin: 8px; }
LABEL { float: left; clear: none; margin-right: 8px; }
LABEL { font-size: 80%; font-style: italic; }
LEGEND { font-weight: 700; font-style: italic }
INPUT[type="text"] { font-size: 11pt }
..lside { float: left; clear: left; width: 50%; }
..rside { float: left; clear: right; width: 50%; }
..title1 { font-size:150%; font-style:italic; padding-right:8px }
..title2 { font-size:110%; font-style:italic; padding-right:8px }
..tstmp { font-style: italic; line-height: 1.5em;
padding-right:8px }
..glabel { margin-left: 3ex }
..glabel LABEL { font-size: 90%; font-style: italic;
text-indent: -3ex; }
..glabel { white-space: normal }
/* stupid microsoft fixes */
* html .glabel { margin-left: 0 }
* html .glabel LABEL { text-indent: 0 }
#dbtn { display: none }
..sbtn { float: right }
#ctrl { display: none }
#newPrice { clear: both; padding-top: 1ex; }
-->
</style>
</head>
<body>
<form class="dj" id="booking" action="event.php"
method="post" onsubmit="return validate()">
<fieldset><legend>Event Information</legend>
<div <!-- needed for IE -->
<div class="lside">
<span class="title1">Dave Black</span><br / <span
class="title2">Tuesday, December 19, 2006 <br />8:00pm to
1:00am (5:00 hours)</span><br />
</div<!-- end of lside div -->
<div class="rside" style="text-align:right">
<span class="title1">Our price :
700< br /> ;< / span>
< span class =" tstmp">上次更新时间：2月24日星期六 -
3:13 pm< / span>< br />
< a
href =" /calgarydj/event.php?page = 0d94c81bc43bb777200ee29ce4f5ace9"> R efresh< / a>
< / div<！ - 结尾的div - >
< div id =" newPrice">< / div>< br />
< / div>
< fieldset id =" ctrl" style =" float：left; clear：left">
< legend> Control< / legend>
< label>
type< br />
< input readonly type =" hidden"名称= QUOT;类型" size =" 6"
value =" booking" />
< / label>
< label>
idx< br />
< input readonly type =" hidden"命名= QUOT; IDX" size =" 1"
maxlength =" 4"值= QUOT; -1" />
< / label>
< label>
pkey< br />
< input readonly type =" hidden"名称= QUOT; p键" size =" 2"
maxlength =" 4"值= QUOT 1 QUOT; />
< / label>< / fieldset>
< div id =" jim">
< div class =" lside" style =" clear：both">
< fieldset>< legend>联系信息< / legend>
< div style =" ; float：left; clear：none">
< label>名称< br />
< input type =" text"命名= QUOT;名称"大小= QUOT; 32" maxlength =" 32"
value =" Dave Black" />
< / label>
< label style =" clear：left">电子邮件< br />
< input type =" text"名称= QUOT;电子邮件"大小= QUOT; 32" maxlength =" 40"
value =" da ***************** @ www.calgarydj.ca" />
< / label>
< / div>
< div style =" float： left; clear：none">
< label>电话（主要）< br />
< input type =" text" ;名称= QUOT; PHONE1"大小= QUOT 13 QUOT; maxlength =" 13"
value =" 403 123-4567" />
< / label>
< label style =" clear：left"> Phone& nbsp;（alternate）< br />
< input type =" text"名称= QUOT; PHONE2"大小= QUOT 13 QUOT; maxlength =" 13"
value =" 403 765-4321" />
< / label>
< / div>
< label>
地址< br />
< input type =" text"名称= QUOT; ADDR1" size =" 32"
maxlength =" 32" value =" 123 Mockingbird Lane NW" />< br />
< input type =" text"名称= QUOT; ADDR2" size =" 32"
maxlength =" 32"值= QUOT;" />
< / label>
< div style =" float：none; clear：both">
< label style =" clear：both">
City< br />
< input type =" text"命名= QUOT;城市"大小= QUOT; 15" maxlength =" 20"
value =" Calgary" />
< / label>
< label>
Prov< br />
< input type =" text"名称= QUOT;省"大小= QUOT; 4英寸maxlength =" 20"
value =" AB" />
< / label>
< label>
邮政编码< br />
< input type =" text"名称= QUOT;邮编" size =" 9"
maxlength =" 9" value =" T2M 0X5" />
< / label>& nbsp;
< / div>
< / fieldset>
< fieldset>
< legend>时间& amp;地点< / legend>
< label>地点名称< br />
< input type =" text"名称= QUOT;场地"大小= QUOT; 30英寸; maxlength =" 32"
value ="" />
< / label>
< label>
起始< br />
< select name =" stime"平变化= QUOT; PCALC（）" < option
value =" 12:30"> 12:30< / option>
< option value =" 13:00"> 1 ：00< / option>
< option value =" 13：30"> 1：30< / option>
< option value =" 14 ：00"> 2:00< / option>
< option value =" 14:30"> 2:30< / option>
< option value =" 15:00"> 3:00< / option>
< option value =" 15:30"> 3:30< / option>
< option value =" 16：00"> 4：00< / option>
< option value =" 16：30"> 4 ：30< / option>
< option value =" 17：00"> 5:00< / option>
<选项值=" 17:30"> 5:30< / option>
< option value =" 18:00"> 6:00< / option>
< option value =" 18:30"> 6:30< / option>
< option value =" 19:00"> 7:00< / option>
< opti on value =" 19:30"> 7:30< / option>
< option selected value =" 20：00"> 8:00< / option>
< option value =" 20：30"> 8:30< / option>
< option value =" 21：00"> 9:00< / option>
< option value =" 21：30"> 9:30< / option>
< option value =" 22:00>> 10:00< / option>
< option value =" 22:30"> 10:30< / option>
< ;选项值=" 23：00"> 11:00< / option>
< option value =" 23：30"> 11：30< / option> ;
< option value =" 00：00"> 00：00 am< / option>
< option value =" 00：30"> 12:30 am< /option>
< option value =" 01：00"> 1:00 am< / option>
< option value =" 01:30>>凌晨1点30分< / option>
< option value =" 02：00"> 2:00 am< / option>
< / select>
<！ - < input type =" text"名称= QUOT; STIME" size =" 6"
value =" 20:00" / - >
< / label>
<label>
ending<br />
<select name="etime" onchange="pcalc()" <option
value="12:30">12:30</option>
<option value="13:00">1:00</option>
<option value="13:30">1:30</option>
<option value="14:00">2:00</option>
<option value="14:30">2:30</option>
<option value="15:00">3:00</option>
<option value="15:30">3:30</option>
<option value="16:00">4:00</option>
<option value="16:30">4:30</option>
<option value="17:00">5:00</option>
<option value="17:30">5:30</option>
<option value="18:00">6:00</option>
<option value="18:30">6:30</option>
<option value="19:00">7:00</option>
& lt;option value="19:30">7:30</option>
<option value="20:00">8:00</option>
<option value="20:30">8:30</option>
<option value="21:00">9:00</option>
<option value="21:30">9:30</option>
<option value="22:00">10:00</option>
<option value="22:30">10:30</option>
<option value="23:00">11:00</option>
<option value="23:30">11:30</option>
<option value="00:00">12:00am</option>
<option value="00:30">12:30am</option>
<option selected value="01:00">1:00am</option>
<option value="01:30">1:30am</option>
<option value="02:00">2:00am</option>
$ b$b </select>
<!-- <input type="text" name="etime" size="6"
value="01:00"/-->
</label>
<label>Address<br />
<input type="text" name="street"大小= QUOT; 30英寸; maxlength="32"
value="123 mockingbird lane" />
</label>
<div class="glabel" style="clear:left">
<label style="margin-top:1ex">
<input type="checkbox" name="inTown" value="true"
onclick="pcalc()" />
Check here if the venue is outside of the city.
</label>
<label style="margin-top:6px;float:right">
If yes, distance from city limits?
<select name="travel" onchange="pcalc()">
<option value="20">0-20 km</option>
<option value="40">20-40km</option>
<option value="60">40-60km</option>
<option value="80">60-80km</option>
<option value="100">80-100km</option>
<option selected value="200">Over 100km</option>
</select>
</label>
<div style="clear:both;padding-top:6px">
<label>
<input type="checkbox" name="earlySetup"
value="true" onclick="pcalc()" />
Do you need us to set up earlier in the day?
(setup normally happens 1 hour before your requested
start time)
</label>
<label style="float:right">
If yes, early setup time
<select name="earlySetupTime" onchange="pcalc()">
<!-- <input name="earlySetupTime" type="text"
value="20:00" size="6" maxlength="6" /-- <option
value="12:30">12:30</option>
<option value="13:00">1:00</option>
<option value="13:30">1:30</option>
<option value="14:00">2:00</option>
<option value="14:30">2:30</option>
<option value="15:00">3:00</option>
<option value="15:30">3:30</option>
<option value="16:00">4:00</option>
<option value="16:30">4:30</option>
<option value="17:00">5:00</option>
<option value="17:30">5:30</option>
<option value="18:00">6:00</option>
<option value="18:30">6:30</option>
<option value="19:00">7:00</option>
<option value="19:30">7:30</option>
<option selected value="20:00">8:00</option>
<option value="20:30">8:30</option>
<option value="21:00">9:00</option>
<option value="21:30">9:30</option>
<option value="22:00">10:00</option>
<option value="22:30">10:30</option>
<option value="23:00">11:00</option>
<option value="23:30">11:30</option>
<option value="00:00">12:00am</option>
<option value="00:30">12:30am</option>
<option value="01:00">1:00am</option>
<option value="01:30">1:30am</option>
<option value="02:00">2:00am</option>
</select>
</label
</div>
</div>
</fieldset>
</div<!-- end of lside div -->
<div class="rside">
<fieldset>
<legend>Dinner Music</legend>
<div class="glabel">
<label>
<input type="radio" name="dinnerMusic" value="recorded"
onclick="pcalc()" />Recorded music (
700<br /></span>
<span class="tstmp">Last updated: Sat, Feb 24 -
3:13pm</span><br />
<a
href="/calgarydj/event.php?page=0d94c81bc43bb777200ee29ce4f5ace9">R efresh</a>
</div<!-- end of rside div -->
<div id="newPrice"></div><br />
</div>
<fieldset id="ctrl" style="float:left;clear:left">
<legend>Control</legend>
<label>
type<br />
<input readonly type="hidden" name="type" size="6"
value="booking" />
</label>
<label>
idx<br />
<input readonly type="hidden" name="idx" size="1"
maxlength="4" value="-1" />
</label>
<label>
pkey<br />
<input readonly type="hidden" name="pkey" size="2"
maxlength="4" value="1" />
</label></fieldset>
<div id="jim">
<div class="lside" style="clear:both">
<fieldset><legend>Contact information</legend>
<div style="float:left;clear:none">
<label>Name<br />
<input type="text" name="name" size="32" maxlength="32"
value="Dave Black" />
</label>
<label style="clear:left">e-mail<br />
<input type="text" name="email" size="32" maxlength="40"
value="da*****************@www.calgarydj.ca" />
</label>
</div>
<div style="float:left;clear:none">
<label>Phone (primary)<br />
<input type="text" name="phone1" size="13" maxlength="13"
value="403 123-4567" />
</label>
<label style="clear:left">Phone (alternate)<br />
<input type="text" name="phone2" size="13" maxlength="13"
value="403 765-4321" />
</label>
</div>
<label>
Address<br />
<input type="text" name="addr1" size="32"
maxlength="32" value="123 Mockingbird Lane NW" /><br />
<input type="text" name="addr2" size="32"
maxlength="32" value="" />
</label>
<div style="float:none;clear:both">
<label style="clear:both">
City<br />
<input type="text" name="city" size="15" maxlength="20"
value="Calgary" />
</label>
<label>
Prov<br />
<input type="text" name="prov" size="4" maxlength="20"
value="AB" />
</label>
<label>
Postal Code<br />
<input type="text" name="postalCode" size="9"
maxlength="9" value="T2M 0X5" />
</label>
</div>
</fieldset>
<fieldset>
<legend>Time & Place</legend>
<label>Venue name<br />
<input type="text" name="venue" size="30" maxlength="32"
value="" />
</label>
<label>
starting<br />
<select name="stime" onchange="pcalc()" <option
value="12:30">12:30</option>
<option value="13:00">1:00</option>
<option value="13:30">1:30</option>
<option value="14:00">2:00</option>
<option value="14:30">2:30</option>
<option value="15:00">3:00</option>
<option value="15:30">3:30</option>
<option value="16:00">4:00</option>
<option value="16:30">4:30</option>
<option value="17:00">5:00</option>
<option value="17:30">5:30</option>
<option value="18:00">6:00</option>
<option value="18:30">6:30</option>
<option value="19:00">7:00</option>
<option value="19:30">7:30</option>
<option selected value="20:00">8:00</option>
<option value="20:30">8:30</option>
<option value="21:00">9:00</option>
<option value="21:30">9:30</option>
<option value="22:00">10:00</option>
<option value="22:30">10:30</option>
<option value="23:00">11:00</option>
<option value="23:30">11:30</option>
<option value="00:00">12:00am</option>
<option value="00:30">12:30am</option>
<option value="01:00">1:00am</option>
<option value="01:30">1:30am</option>
<option value="02:00">2:00am</option>
</select>
<!-- <input type="text" name="stime" size="6"
value="20:00"/-->
</label>
<label>
ending<br />
<select name="etime" onchange="pcalc()" <option
value="12:30">12:30</option>
<option value="13:00">1:00</option>
<option value="13:30">1:30</option>
<option value="14:00">2:00</option>
<option value="14:30">2:30</option>
<option value="15:00">3:00</option>
<option value="15:30">3:30</option>
<option value="16:00">4:00</option>
<option value="16:30">4:30</option>
<option value="17:00">5:00</option>
<option value="17:30">5:30</option>
<option value="18:00">6:00</option>
<option value="18:30">6:30</option>
<option value="19:00">7:00</option>
<option value="19:30">7:30</option>
<option value="20:00">8:00</option>
<option value="20:30">8:30</option>
<option value="21:00">9:00</option>
<option value="21:30">9:30</option>
<option value="22:00">10:00</option>
<option value="22:30">10:30</option>
<option value="23:00">11:00</option>
<option value="23:30">11:30</option>
<option value="00:00">12:00am</option>
<option value="00:30">12:30am</option>
<option selected value="01:00">1:00am</option>
<option value="01:30">1:30am</option>
<option value="02:00">2:00am</option>
</select>
<!-- <input type="text" name="etime" size="6"
value="01:00"/-->
</label>
<label>Address<br />
<input type="text" name="street" size="30" maxlength="32"
value="123 mockingbird lane" />
</label>
<div class="glabel" style="clear:left">
<label style="margin-top:1ex">
<input type="checkbox" name="inTown" value="true"
onclick="pcalc()" />
Check here if the venue is outside of the city.
</label>
<label style="margin-top:6px;float:right">
If yes, distance from city limits?
<select name="travel" onchange="pcalc()">
<option value="20">0-20 km</option>
<option value="40">20-40km</option>
<option value="60">40-60km</option>
<option value="80">60-80km</option>
<option value="100">80-100km</option>
<option selected value="200">Over 100km</option>
</select>
</label>
<div style="clear:both;padding-top:6px">
<label>
<input type="checkbox" name="earlySetup"
value="true" onclick="pcalc()" />
Do you need us to set up earlier in the day?
(setup normally happens 1 hour before your requested
start time)
</label>
<label style="float:right">
If yes, early setup time
<select name="earlySetupTime" onchange="pcalc()">
<!-- <input name="earlySetupTime" type="text"
value="20:00" size="6" maxlength="6" /-- <option
value="12:30">12:30</option>
<option value="13:00">1:00</option>
<option value="13:30">1:30</option>
<option value="14:00">2:00</option>
<option value="14:30">2:30</option>
<option value="15:00">3:00</option>
<option value="15:30">3:30</option>
<option value="16:00">4:00</option>
<option value="16:30">4:30</option>
<option value="17:00">5:00</option>
<option value="17:30">5:30</option>
<option value="18:00">6:00</option>
<option value="18:30">6:30</option>
<option value="19:00">7:00</option>
<option value="19:30">7:30</option>
<option selected value="20:00">8:00</option>
<option value="20:30">8:30</option>
<option value="21:00">9:00</option>
<option value="21:30">9:30</option>
<option value="22:00">10:00</option>
<option value="22:30">10:30</option>
<option value="23:00">11:00</option>
<option value="23:30">11:30</option>
<option value="00:00">12:00am</option>
<option value="00:30">12:30am</option>
<option value="01:00">1:00am</option>
<option value="01:30">1:30am</option>
<option value="02:00">2:00am</option>
</select>
</label
</div>
</div>
</fieldset>
</div<!-- end of lside div -->
<div class="rside">
<fieldset>
<legend>Dinner Music</legend>
<div class="glabel">
<label>
<input type="radio" name="dinnerMusic" value="recorded"
onclick="pcalc()" />Recorded music (
50/hr)
</label>
<br style="clear:both" />
<label>
<input checked type="radio" name="dinnerMusic"
value="guitar" onclick="pcalc()" />Live classical guitar
(
50/hr)
</label>
<br style="clear:both" />
<label>
<input checked type="radio" name="dinnerMusic"
value="guitar" onclick="pcalc()" />Live classical guitar
(
这篇关于HTML表单设计提示 - 文本输入元素的字体大小 - IE7 vsFirefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
