{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 可以哭但决不认输i 的问题《How do I make Standards mode work as well as quirk》','https://www.manongdao.com/q-1265651.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
The following Html works great for me in FireFox or IE7/8 (with or without the Style Tag)
<!-- Deliberately no DocType to induce Quirks Mode -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
Input.quirks
{
margin: 1px 0px 1px 0px;
border: solid black 1px;
}
</style>
</head>
<body>
Should work in Quirks Mode <br />
<input class="quirks" type="text" style="width: 300px;" /><br />
<input class="quirks" type="text" style="width: 147px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" maxlength="25" style="width: 150px;" /><br />
<input class="quirks" type="text" style="width: 94px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" style="width: 100px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" value="DA8 1DE" style="width: 100px;" />
</body>
</html>
However I am told that the absence of a DocType at the top of said HTML is causing both both browsers to work in "Quirks" mode.
I am told this is bad.
I have tried several DocTypes but have not found a DocType/HTML combination which yields a correct rendering in both browsers.
Anything other than "Quirks" mode causes the browsers to react differently to the attempt to set the width of a textbox. This seems to lead to a position where I can correct my instructions for either FF or IE and suddenly the other will fail.
Some detail...
1.> The objective here is that the 3 rows should appear to be the same width exactly when rendered in each browser. It is not nessecary that the rendered widths are the same across browsers, merely that they appear correctly justified/alighned inside each browser.
2.> The image referenced is a spacer image 3 pixels wide and 1 high (an alternative to this would also be good)
3.> I do not want to introduce tables if at all possible.
It seems as though the Quirks mode is the only mode which is consistent across the browsers. I am worried however that the final version of IE8 or indeed in some future browser, the quirks mode will not be the default.
What should I do ? How do specify a DocType (and maybe alter my html) which will create a consistent look across browsers?
This is an excellent article on getting your DOCTYPE right:
http://www.alistapart.com/stories/doctype/
The main difference between "Quirks" and "Standards Compliance" mode is a different "box model" which results in different ways of calculating sizes based on width/height, padding, margin and border settings. In Standard Compliance mode, the effective width and height of a box is calculated by adding all these parameters (please search the web for more details).
So, since you specify a 1px-border, your first input fields will be 302px wide (300px + 2*1px for the border left and right). The inconsistency between FF and IE you mentioned may be caused by different "default values" for the "padding" setting. I just tested your code with a DOCTYPE and no padding for the input fields -- both browsers rendered it the same way.
Now, for the spacer images: Don't use them. You don't need them. Just use a right-margin of "3px" for the input fields for the gap.
Then do the math to determine the correct "width" settings so that the sum of all widths (includung padding, border and margin!) in each row are equal, for example:
Notice that "5px" consists of the 3px-right-margin and 2 times the border (1px).
There you go. If you want to use a different padding for a nicer look-and-feel, just include it in your calculations!
Since your problem was mostly caused by different default values in IE and Firefox, you may be interested in a Reset CSS stylesheet, which includes values for things like padding, effectively clearing the defaults for every browser so that they all render similarly.