蓝色框是< label>的临时样式.标记和橙色线是< div>的临时边框样式标签(所以我可以看到它们延伸和断裂的位置). < label>的样式设置为float:left和右边的< div一样.此外,< div>的后代控件.也是浮动的:纯粹是这样他们将排在< div>的顶部(因为有一些较高的控件,如下面的多行文本框).
单选按钮由ASP控件生成,因此它们包含在< span>中. – 因为它是< div>的后代,所以也向左浮动.
这是IE7中呈现的屏幕的相同部分:
有一些小的渲染差异,但是让我疯狂的一个重要因素是< input>旁边的额外空白区域.控制!请注意,单选按钮和复选框周围的< span>正确排列.
虽然它们没有显示,但下拉列表和列表框也会出现同样的情况.我没有尝试将输入控件包装在< span>中,但这可能有效.不过,这是一个丑陋的黑客行为.
我已经尝试了几个IE7 for Box问题的解决方法,我编辑了CSS,直到我处于纯巫毒模式(即随机变化,希望有些东西有效).就像我说的那样,我希望有人会看到这个并说:“我以前见过这个!试试这个…”
任何人?
后续1:
我正在使用XHTML 1.0 Transitional< DOCTYPE>,所以我应该处于标准模式.
后续2:
以下是上面生成的代码的小片段(第一个控件和最后一个控件).请注意,此代码由ASP.Net生成,然后由JavaScript / jQuery动态编辑.
<fieldset id="Requestinformation"> <legend>Request information</legend> <ol> <li> <label id="ctl00_ContentPlaceHolder1_txtRequestDate_L" class="stdLabel" for="ctl00_ContentPlaceHolder1_txtRequestDate">Request Date:</label> <div class="FormGroup"> <input id="ctl00_ContentPlaceHolder1_txtRequestDate" class="RSV DateTextBox hasDatepicker" type="text" value="10/05/2004" name="ctl00$ContentPlaceHolder1$txtRequestDate"/> <img class="ui-datepicker-trigger" src="/PROJECT/images/Calendar_scheduleHS.png" alt="..." title="..."/> <span id="txtRequestDate_error"/> </div> </li> --STUFF DELETED HERE-- <li> <label id="ctl00_ContentPlaceHolder1_chkAppealed_L" class="stdLabel" for="ctl00_ContentPlaceHolder1_chkAppealed"> Request Appealed?</label> <div class="FormGroup"> <span class="stdCheckBox"> <input id="ctl00_ContentPlaceHolder1_chkAppealed" type="checkBox" name="ctl00$ContentPlaceHolder1$chkAppealed"/> </span> </div> </li> </ol> </fieldset>
这是CSS的相关部分(我仔细检查以确保重复问题):
div { border-style: solid; border-width: thin; border-color:Orange; } label { border-style: solid; border-width: thin; border-color:Blue; } .FormGroup { float:left; margin-left: 1em; clear: right; width: 75em; } .FormGroup > * { float:left; background-color: Yellow; } fieldset ol { list-style: none; } fieldset li { padding-bottom: 0.5em; } li > label:first-child { display: block; float: left; width: 10em; clear: left; margin-bottom: 0.5em; } em { color: Red; font-weight: bold; }
解!
Matthew在IE/Win Inherited Margins on Form Elements年把这个页面指向了我,这就是问题所在.输入框继承了所有包含元素的左边距.我选择的解决方案是包装每个< input>无格式< span>中的元素.我一直在努力保持HTML的结构尽可能保持语义,所以我在$(document).ready()函数中使用jQuery命令解决了它:
//IE Margin fix: // http://www.positioniseverything.net/explorer/inherited_margin.html jQuery.each(jQuery.browser,function(i) { if($.browser.msie){ $(":input").wrap("<span></span>"); } });
请注意,这只会在IE上添加愚蠢的< span> …
StackOverflow再次救援!
解决方法
编辑:您可以在http://www.positioniseverything.net/explorer/inherited_margin.html找到更多信息和解决方法