Reprinted: on Having Layout

xiaoxiao2021-04-01 229

Translator Note: A very good article, I have recommended it on Blog a long time. After two days, I have been translated, and I recommend reading.

English is here.

All the words in the article did not translate, and the words themselves mean more. They all feel that don't turn, I'm here is also a proprietary property, so I have to let go. The level is limited, and many places are moderately translated, and the mistakes are welcome. Welcome to the message.

Quote a paragraph from Dean Edwards:

I Recommend That Every CSS Designer and Dom Scripter Read this. Understanding "Layout" gives a huge Insight Into Lots of Other IE Bugs and IDiosyncras.

(Dean edwards)

Introduction

There are a lot of strange rendering issues in Internet Explorer to be resolved by giving it "layout". John Gallant and Holly Bergevin classify these questions as "Dimensional Bugs", meaning that these bugs can be solved by giving a width or height to the corresponding element. This takes out a question about "layout": Why is it changed the rendering characteristics of the element, why will it affect the relationship between elements? This question is very good, but it is difficult to answer. In this article, we focus on this complex issue, there will be those aspects, and the specific discussion and examples of a certain aspect provide the related links given in the following.

Haslayout - definition

"Layout" is a private concept of IE / WIN, which determines how an element is displayed and constrained, how to interact with other elements, how to respond to and deliver an application event / user event, etc. Concept of a form.

Microsoft's developers believe that the box-type element should have a "property" (this is an object-oriented programming), so they use layout, which is HASLAYOUT.

Haslayout is actually neither an attribute is not a behavior, but IE this rendering engine is inheriting a rendering concept that has been rendered, and the elements rendered under this concept will have a feature.

In fact, this rendering feature is in some html elements, and in other elements can also be triggered to True through some CSS properties, and once the trigger will not reverse.

the term

When we say that an element "is layout" or "get layout", or when "HAS Layout", we mean it means that its Microsoft's proprietary attribute Haslayout is set to True. A "layout element" can be an element that has a Layout or an element that gets a Layout by setting some CSS properties.

"None Layout Elements" refers to the elements of HASLAYOUT un triggered, such as a clean DIV element that does not set a wide high size can be used as a "no Layout ancestor".

Give a method that gives Layout to a default, it is included to set the CSS attribute that triggers Haslayout = TRUE. Refer to the default Layout element and list of these attributes. There is no way to set HASLAYOUT = FALSE unless the CSS attribute that triggers Haslayout = True is removed.

Variety of problems

Haslayout's problem regardless of the novice or older, regardless of the designer or programmer may have encountered. Elements with layout usually have different ordinary and unpredictable display effects, and sometimes even implicated to their child elements.

Whether an element has "layout" may trigger some questions: IE a lot of common floating bugs. The element itself is an abnormality problem of some basic attributes. Margin collapsing between the container and its descendants. There are many problems encountered when using the list. Background image position deviation problem. Processing inconsistency between browsers encountered when using scripts.

The above list is only listed, and it is not perfect. The following article will describe the various issues that have not been "layout" as detailed.

Where is Layout from?

Unlike standard properties, it is not like a private CSS property of some browsers, and Layout cannot be directly set through a CSS statement. That is to say, there is no "layout attribute" such something, the element is either automatically owned by Layout, or with some CSS statements quietly get Layout.

Default Layout element

The following elements should be the default with Layout:

, ,

, <button> <iframe>, <Embed> , <Object>, <Applet> <marquee>
Attributes
The following CSS attributes and values will make one element get layout:
Position: Absolute
The containing block containing the absolute positioning element will often have problems in this regard.
FLOAT: LEFT | RIGHT
Due to the characteristics of the Layout element, there will be a lot of weird performances in the floating model.
Display: inline-block
When an inline-level element requires Layout, it is often used, which may also be the only effect of this CSS property - let an element have Layout. "Inline-block behavior" can be implemented in IE, but very different from the public:
IE / WIN: INLINE-Block and Haslayout.
Width: arbitrary value
Many people meet the problem of Layout issues, usually try this to fix it.
HEIGHT: Arbitrary value
HEIGHT: 1% is used in Holly Hack.
ZOOM: Any value (
MSDN)
MS proprietary attributes cannot be verified. but
ZOOM: 1 can be temporarily used to make debugging.
Writing-mode: TB-RL
MSDN)
MS proprietary attributes cannot be verified.
In IE7, Overflow has also become a Layout trigger:
Overflow: Hidden | Scroll | Auto
This property does not trigger the functionality of the Layout in the previous version IE.
Overflow-x | -y: hidden | Scroll | Auto
Overflow-x and overflow-y are attributes in the CSS3 box model that has not been widely supported by browsers. They did not trigger the functionality of layout in previous versions of IE.
In addition, IE7's screen has newly added several Haslayout actors. If only from Haslayout, MIN / MAX and WIDTH / HEIGHT are similar, and the position of Position's Fixed and Absolute are also exactly the same.
Position: fixed
.
MIN-Width: Arbitrary value
Even if set to 0, you can give the element to get layout.
Max-width: Any value other than NONE
.
MIN-HEIGHT: Arbitrary value
Even if set to 0, you can let the element of Haslayout = TRUE
Max-height: Any value other than NONE
.
The above conclusions are derived with IE Developer Toobar and pre-test.
Inline level elements
For inline elements (which can be default, it is inline, such as the SPAN element, or the element of display: inline)
Width and Height are only triggered in IE5.x and IE6's quirks mode. Because in IE6, if the browser runs in standard compatibility mode, the inline elements ignore the width or height property, so that Width or Height cannot order this element to have layout. Zoom can always trigger HASLAYOUT, but it is not supported in IE5.0.
Elements with "layout" If it is also display: inline, then its behavior is very similar to the INLINE-Block's inline-block: in the paragraph and ordinary text, in the horizontal direction and continuous arrangement, affected by Vertical-Align And the size can be adjusted according to the content adaptation. This can also explain why it is less than a block element element in IE / WIN, because DISPLAY: inline in other browsers is inline, unlike IE / Win once the inline elements have Layout It will become inline-block.
Scripting attribute Haslayout
We said that HASLAYOUT is "scripting properties" to distinguish between the CSS attribute we are well known.
Note Once an element has Layout, there is no way to set it into HASLYOUT = FALSE.
Haslayout-property can be used to detect if an element has a layout: for an example, if its ID is "EID", then just enter javascript: alert (Eid.currentStyle.haslayout) in the IE5.5 address bar. Detect its status.
IE's Developer Toolbar checks the current style of an element in real time; if Haslayout is TRUE, its value is displayed as "-1". We can trigger HASLAYout for debugging by modifying the properties of an element in real time to "1".
Another thing to note is "layout" will affect script programming. If an element is not "layout", the ClientWidth / ClientHeight always returns 0. This will let some scripts are confused, and this is not the same as the Mozilla browser. However, we can use this in IE5.0 to detect "layout": If ClientWidth is zero, then this element is not Layout.
CSS Hacks
The following is used to trigger HASLAYOUT, has been tested by IE6 and below. The future version of IE may do different processing. If the new version of the browser publishes we will rearrange this part.
John Gallant and Holly Bergevin released in 2003 Holly Hack:
/ * / * / * html .gainlayout {heiGHT: 1%;} / * * /
Any element of IE5 can get Layout, in addition to the inline elements in IE6 in IE6. It is generally very effective, in addition to some very few cases, it is necessary to use Height: 0 or 1px. And Overflow: Hidden is incompatible unless the IE6 is labeled in compatible mode (because if the parent element is not fixed, height: 1% will be changed back to Height: Auto).
Or we can use underscore Hack:
.gainlayout {_height: 0;} Addition, more backward compatibility methods are conditional comments:
<! - [if lte ie 6]> <style> .gainlayout {height: 1px;} </ stop> <! [endif] ->
Link a detailed external style sheet file specifically for IE / Win in the condition comment, or a safe and effective way:
<link rel = "stylesheet" href = "allbrowsers.css" type = "text / css" /> <! - [if LTE IE 6]> <link rel = "stylesheet" href = "ifix.css" type = "Text / CSS" /> <! [Endif] ->
We prefer to use Height: 0 and 1PX - and advocate always using Height unless it's and other things conflicts (Overflow: Hidden). For the value, we tend to avoid 1% because it may (although few) causing some problems.
One need to pay attention is if we want an element to keep inline, then height can not use, which can be used by Display: inline-block. We only use zoom: 1 in the early debug phase to avoid some rendering errors.
We have seen some situations that make Holly Hack blindly use as HOLY HACK blindly, such as use of floating elements or use this HACK to have specific widths. To remember this HACK's purpose is not to add a height to an element, but just trigger HASLAYOUT = True.
Don't set layout: * {_height: 1px;}. The so-called never, gaining Layout does not equal the winner, it is only used to change the rendering mode.
Hack organizes
But browsers always change, we need to face a lot of problems, such as some of the HACKs that depend on IE6's bugs will fail (or even harmful) due to bug fixes in IE7 or higher new browsers; For example, similar layout bugs in the new version of the browser still exist but the filter used for HACK, such as * HTML, does not work properly. In this case, MS proprietary attribute zoom can be considered.
<! - [IF lt IE 7]> <style> / * IE 6 IE5.5 IE5.0 Words * /. GainLayout {Height: 0;} </ stop> <! [endif] -> <! - [IF IE 7]> <style> .gainlayout {zoom: 1;} / * or anything possible after any future * / </ style> <! [Endif] ->
ZOOM: 1; Any element (including inline elements) of IE5.5 can get Layout, but it is invalid in IE5.0. There is no other incidental effect (inline elements will become inline-block, this is of course). If you need to verify, you should use the condition annotation to hide ZOOM.
In fact, when we consider "backward compatibility" is self-contradictory, we strongly recommend that the page designer goes back to see the obvious or unambiguous "Hacks" used in his page, and use conditional annotations to Different browsers are reprocessing in general.
About IE Mac small problems
IE Mac and WINDOWS are completely different two things, they each have their own rendering engine, IE Mac, I don't know what to "Haslayout" (or ContenTedITable). In contrast, IE Mac rendering engine is more compatible, such as HEIGHT is treated as Height, there is no other effect. Therefore, "HASLAYOUT" Hacks and other solutions (especially by using Height or Width properties) are often harmful to IE Mac, they need to be hidden. More questions about IE MAC can be found in IE Mac, Bugs and Oddities Pages. MSDN documentation
There are few places involving this MS attribute in MSDN, and the relationship between the Layout and IE rendering models is less.
At IE4, almost all elements have some kind of Layout (MSDN) in addition to unprecedented positioning. In this early Layout concept, like Border, Margin, Padding These attributes are called "layout properties", they cannot be applied to a simple inline element. In other words, "Having Layout" can be roughly understood: "You can have these properties."
MSDN still uses the Layout property, but the meaning has changed, they and the elements with layout have nothing to do. The MS is introduced in IE5.5, which is only a certain internal sign.
In IE5.5, MSHTML Editing Platform (that is, you can use <body contentable = true> to allow users to edit, drag the layout element, and adjust its size, etc.), three and layout are described in documentation:
If there is a Layout element, the layout of the content will be determined by its boundary rectangle.
It is basically a rectangle that is a rectangle that has layout is a rectangle.
From the inside, it is the meaning of Layout means that an element will be responsible for drawing its internal content.
(Editing Platform)
And the internal working mechanism related to Layout did not have the corresponding document description until August 2005, when the reason for the Web Standards Project and Microsoft's special work group, Markus Mielke [MSFT] opened the gate-in-depth discussion:
In general, in the DHTML engine of Internet Explorer, the element is not responsible for its own position. Although a DIV or a P element has a location in the source code, there is a position in the document stream, but their content is arranged by a Layout ancestor (often body) controlled by their nearest. These elements depends on their ancestors to handle many heavy work such as deciding size and measurement information.
(Haslayout Overview)
analysis
Our analysis tried to explain what happened under a known case, which should also be guided as an unknown case. But this tried to use the black box test method of specification of the test case, it is destined to have the mystery of the black box - we can't answer "why". We can only try to understand the entire "Haslayout" mode of work framework, and how it will affect the rendering of the webpage document. Therefore, in the end we can only provide some guidelines (and can only be guidelines, rather than absolute solutions).
We think they refer to a small form. The internal content of a Layout element is completely independent, and it is impossible to affect anything outside its boundary.
And the MS property is just a sign bit: Wait a variety of specific properties. This independence may be explained why the Layout element is usually more stable, and they can make some bugs disappear. The cost of this situation has two, one is to deviate from the standard, and the other is that it does not take into account the bugs and problems that may occur in the future.
MS's "page" mode, from the perspective of symbolics, it can be seen as composed of many mutually disconnected small blocks, while HTML and W3C mode considers the "page" mode should be a complete, storyteller. The relevant information area is composed.
Detailed description of various situations
Clear floating and automatic expansion adaptation height
Floating elements will be automatically included by the Layou element. This is a problem that many novices often encounter: the page completed under IE has extended all unclear floating elements under the standard compatible browser.
Containing floatshow to clear floats without structural markup
On the contrary: If you really need a floating element to extend it containing a container, what should I do when I don't want the desired effect? You are likely to meet this headache, the in-depth discussion below is an example:
Acidic float tests
In IE, a floating element is always "belonging to" its Layout contains containers. The back elements will be affected by this Layout containing containers rather than this floating element.
This feature and IE6 automatically extend to accommodate the feature of internal content width, it can be regarded as being affected by this rule: "Decisive by its boundary rectangular box".
A worse problem: CLEAR cannot affect its Layout containing a float element other than containers. If you rely on this BUG to go to a standard compatible browser in the page of IE, you only have to do.
More related information View this section of this article "and CSS specifications".
Elements next to floating elements
When a block-level element is tight after a left floating element, the text content should be arranged in order along the right side of the floating element and slide to the floating element. But if this block-level element has a Layout, for example, a width is set because of some reason, then this layout element will behave as a rectangle, where the text will not slide below the floating element. Its width is also falsely calculated - countless from the right side of the floating element, so if Width: 100% will result in the display, the width of this Block plus the width of the floating element and the lateral scroll bar appears. This manifestation is far away from the results described in the specification.
Similarly, the relative positioning element adjacent to the floating element should be referred to the edge of the parent element (for example, LEFT: 0; should be stacked a relative positioning element in front of it) Above the floating element). In IE, offset LEFT: Value; is started from the edge of the floating element, which will cause the horizontal direction due to the width change of the floating element (a solution to use margin- LEFT is replaced, but it should also be noted that there will be some weird problems when using percentage).
According to the specification, the floating element should be intertwined with the subsequent boxes. And this is unable to achieve a rectangle in a two-dimensional space without a cross.
Can (again) access the following page:
Three Pixel Text-Jog
We can see that the Layout element after a floating element will not show this 3px gap bug, because the 3PX hard edge of the floating element cannot affect the internal content of a Layout element, so this hard side will push the entire layout element. 3px. It is like a protective cover, and Layout can protect its internal content from affected, but the power of floating elements will push the entire protective cover. More related information View this section of this article "and CSS specifications"
List
Whether it is the list itself (OL, UL) or a single list element (Li), it will affect the performance of the list after you have Layout. The performance of different versions IE is different. The most obvious effect is reflected on the list symbol (if your list is customized, the list symbol will not be affected by this problem). These symbols are likely to be attached to the list elements through some internal mechanism (usually attached to them). Unfortunately, because of the "internal mechanism" added, we cannot access them and cannot correct their errors.
The most obvious effect is:
After the list gets Layout, the list symbol disappears or placed in different or wrong locations.
Sometimes they reappear again by changing the margins of the list element. This seems to be the result of the following facts: the layout element will try to cut off internal content that exceeds its boundary.
After the list element gets layout, there will be as the same problem as above, more references (EXTRA VERTICAL SPAEEN LIST ITEMS)
There is further problem that any list element with layout seems to have its own independent counter in an ordered list. For example, we have an ordered list with five list elements, with only the third list element with layout. We will see this:
1 ... 2 ... 1 ... 4 ... 5 ...
In addition, if a list element with Layout is displayed across the line, the list symbol is aligned (not aligned according to the top of the expected).
Some of the above is still unable to solve, so it is best to avoid Layout if you need a list of symbols to get the list and list elements. If you need to limit the size, it is best to set the size to other elements, such as an element externally, and set its width, or, for example, give the content set height in each list element, and the like.
Frequently Asked Questions of the list of IEs appear in the anchor (anchor) of a Display: Block in a certain LI. In this case, the space between the list elements will not be ignored and often displayed between an additional line between each LI. A solution to avoid this vertical direction is to give these anchor layout. This is also the advantage that the rectangular area of the entire anchor can respond to the mouse click.
form
Table always has a Layout, which is always manifested as an object that has defined width. In IE6, Table-Layout: fixed is usually the same as 100% table, and this will also bring many problems (some computing errors). In addition, there are some situations where IE 5.5 and IE6's Quirks mode.
Relative positioning element (R.P.)
Note that because the POSITION: Relative does not trigger Haslayout, there are many rendering errors such as content disappearance or misplaced. These phenomena may appear in the refresh page, adjust the window size, scroll page, selected content, etc. The reason is that when IE makes it offset according to this property, I've seems to have forgotten the signal to make the Layout child elements "heavy painting" (and if it is a Layout element, then in the signal chain of the incident, This signal that is transmitted to its child will be made normally).
R.P. Parent and disappearing floated childdisappearing list-background bug
The above is a description of some related issues. As an experience, it is preferred to give it to Layout relative to one element. Moreover, we also need to check if the parent element with this structure also needs layout or position: relative or both, if it involves floating elements, it is important. Absolute positioning element (A.P.): Contains blocks, what is the block?
It is important to understand that the concept of CSS is important. It answers the absolute positioning element is the problem of relatively positioning: including the block determines the starting point of the offset, including the block defining a percentage length calculation reference.
For absolute positioning elements, the block is determined by the nearest positioning ancestor. If its ancestors are not locked, then the initial containing block HTML is used.
Typically we will use POSITION: Relative to set any included blocks. That is to say, we can let the origin and length of the absolute positioning element, the origin and length of the elements, which can meet the needs of the visibility concept such as "content priority", or give complex floating layout. Bring convenience.
But due to the presence of the Layout concept, the effect of this design concept is to make a question mark in IE. Because the elements in IE are offset relative to its nearest Layout positioning ancestors, the percentage size is referring to the next Layout ancestor calculated by the Layout positioning ancestor. Note that the little difference here, and just mentioned that position: Relative does not trigger HASLAYOUT.
Assume that a parent element without Layout is relatively positioned - we have to give it to layout to make the offset work:
Absolutely Buggy II
Suppose an unmodified parent element requires a specific size, and the page design is based on the percentage width - we can give up this idea because the browser supports:
Absolutely Positioned Element and Percentage Width
Filter
MS proprietary filter properties Filter is only available for the Layout element. Some filters extends the boundary of the object. They show their own unique defects.
Re-flow in rendered elements (RE-FLOW)
When all elements have been rendered, if there is a change caused by the mouse (for, such as a link for Background changes), IE contains the block to rearrange the block. Sometimes some elements will be ranked in a new location, because when this mouse occurs, IE already knows the width, offset of all related elements, and other data. This will not occur when the document is first loaded, and the width is not determined due to the characteristics of automatic expansion. This will result in a hopping in the page when the mouse passes.
Jump on: HoverQuirky Percentages: The Reflow
These and rearrangers related BUG will bring a lot of flow layout to the percentage margins and fillons.
Background origin
MS proprietary HASLAYOUT will also affect the background positioning and expansion. For example, according to CSS specification, Background-Position: 0 0 should refer to the "Padding Edge" of the element. And under IE / WIN, if Haslayout = false refers to "Border Edge", when Haslayout = True refers to a whitening edge:
Background, Border, Haslayout
Margin overlap
Haslayout will affect a box and its descendants overlap. According to the specification, if a box does not have a white and upper frame, then its upper distance is overlapped with the upper edge of the first child element in its documentation:
Collapsing marginsuncollapsing margins
In IE / WIN if this box has layout, this phenomenon does not happen: it seems that it will prevent the margins of their children from extending out of containers. In addition, when Haslayout = True, the problem of margin calculation errors will occur, whether including container or child elements. Margin Collapsing and Haslayout
Block level link
Haslayout affects a block-level link-linked mouse response area (click area). Usually HASLAYOUT = FALSE is only a text overlay area to respond. Haslayout = True can respond to the entire block area. Any block-level element added to an incident such as OnClick / OnMouseOver has the same phenomenon.
Block Anchors and Haslayout
Use the keyboard to browse in the page: Explore
When you use Tab to be browsed in the page, if you enter a page link (in-page link), then pressing the TAB button will not continue normally:
Haslayout Property Characterizes IE6 Bugkeyboard Navigation and Internet Explorer
The Tab key will bring the user (which is usually wrong) its nearest Layout ancestor (if the ancestor is made of Table, Div, SPAN or some other label).
Stack, layering and layout
There seems to be two layers and stacking sequences in IE / Win:
One is (pseudo) attempts to use CSS mode: Effect of Z-Index Value to RP And AP Blocks has a stacking order generated by "Haslayout" and its twin brothers "contenttedITable" behavior. As is shown in the example of the relatively positioned example, the stacking phenomenon under the influence of Layout is like Harry Houdini (Translator Note: Magician, with a playing card magic is famous).
The two stacked modes are incompatible, but they coexist in the IE rendering engine. Experience Talk: When debugging, both situations should be considered. We may be regularly seen in the drop-down menu or a similar complex menu, because they tend to involve many headache problems such as stacking, positioning and floating. Elements for those Z-Index positioning is a possible correction method, but it is not limited thereto, here is just reminding.
Contenteable
If you set a contentable = true property to an HTML tag, such as <body contentable = true>, the element will be allowed to perform real-time editing, dragging the size, etc. of the element and its Layout child elements. You can use this property to look at the effect on a floating element or a list of Layout in an ordered list.
In order to operate (edit them), "ContenTedITable" and "Haslayout" introduced a separate stack order for those who returned TRUE for those HASLAYOUT.
Editing Platform inherits the Layout concept, which is mostly because of the misunderstanding of Layout, which can be used as a proof (some extent integrated IE editing engine), which is also implied with a forced backward compatibility of the Layout concept). .
More on contentEditable
Similar places and CSS specifications
Your MSIE page is a mess in another browser? We don't have to let this happen. If you use it properly, any good browser can flatten the MSIE page - as long as you use some correct CSS.
With the microscopicity between Haslayout and "New Block-Level Format Content", we can have several ways to re-implement Haslayout's "including floating elements" effect, and some "floating elements next to the standard compatible browser. "The unique effect. Reverse Engineering SeriesImulations
Quirks mode
Some Doctype, or <XML> declarations, "Quirks mode" or backward compatibility mode is triggered in IE6. In this mode, IE6 is like IE5.5 and has the same BUG, the same problem and the same behavior with its brother.
For IE7, <XML> declarations will not change the rendering mode; to trigger quirks mode, we have to insert a comment. (IE7's quirks mode and IE6 quirks mode are still to be verified)
<? XML Version = "1.0" Encoding = "UTF-8"?> <! - ... Let IE7 run in the Quirks mode -> <! docty html public "- // w3c // DTD XHTML 1.0 Strict / / En "" http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd ">
Layout - Conclusion
The entire Layout concept and some basic CSS concept are incompatible, namely, arrange, floating, positioning, and lamination.
Due to the elements or or no layout in the page, it will cause IE / WIN behavior and the CSS specification to violate.
Have a Layout - another engine?
The object model of IE seems to be a document model and a combination of their traditional application model. The reason why I mention this is because it is important for understanding how IE renders. The switch from the document model to the application model is to give an element "layout".
(Dean edwards)
Sometimes it is impossible to explain some kind of behavior: such as Haslayout, will choose one of two different rendering engines based on its status, and each of them has its own bugs and weird.
Unable to eliminate bugs
Software bug is caused by considering integrity and logic issues in the production process. This is the natural defect of human beings, and there is no good solution.
Also because of this defect, any tried to repair the software and repair the BUG will inevitably lead to more complex bugs in the software.
All software that rely on other software-of course, including dependent operating systems, will also depend on their bugs. So we will get a series of bugs from all associated software, which also shows that it is almost impossible to find a bug software.
(Molly, The Cat?)
This article was founded on June 30, 2005, and finally revised on April 2, 2006.
editor:
Holly Bergevin
INGO CHAO
Bruno fasino
John Gallant
Georg s? Rtun
Philippe Wittenbergh
Special acknowledgment gives this project support:
Dean Edwards, And
Molly? The cat?
Various language versions:
Original (ENGLISH)
Brazilian Portuguese By
Mauricio Samy Silva
Chinese version by
Old9
Related Discussion:
Dean.edwards.name/weblog/
Contact the author:
Spam.Layout@satzansatz.de
Copyright statement:
This article is based on
Creative Shared Agreement is released.</div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-131245.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div>New Post(0)
</div><div></div></div></div><ul class="postlist list-unstyled">

</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="131245" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved

</div><div class="col text-right">Processed:
0.035, SQL:
 9</div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'Dplm_2BXzYxT5naz35blMQygsrvblSeSrmxogUJgSmn_2FlDDVgcrwV01IeaAfXpNXIkm_2BPIEXvs68QG9MDcyZI_2Fgw_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
 var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});

function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width(); 
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}

if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {

});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}

function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); 
});
}

$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});

$('#nav li[data-active="fid-1"]').addClass('active');
</script>