<fieldset id="qyqga"><acronym id="qyqga"></acronym></fieldset>
  • <fieldset id="qyqga"><samp id="qyqga"></samp></fieldset><samp id="qyqga"></samp>
    <code id="qyqga"><del id="qyqga"></del></code>
    <nav id="qyqga"><tfoot id="qyqga"></tfoot></nav><table id="qyqga"><dd id="qyqga"></dd></table>
  • 標簽下,然后為div指定一個類, 然后CSS這樣設(shè)計: #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? \"600px\": \"auto\" );} 第一個min-width是正常的;但第2行的width使用了Javascript,這只有IE才認得,這也會讓你的HTML文檔不太正規(guī)。它實際上通 過Javascript的判斷來實現(xiàn)最小寬度。

    6.DIV浮動IE文本產(chǎn)生3象素的bug 左邊對象浮動,右邊采用外補丁的左邊距來定位,右邊對象內(nèi)的文本會離左邊有3px的間距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; \/\/這句是關(guān)鍵}
    <\/div>
    <\/div> <\/div>

    7.IE捉迷藏的問題 當div應(yīng)用復(fù)雜的時候每個欄中又有一些鏈接,DIV等這個時候容易發(fā)生捉迷藏的問題。 有些內(nèi)容顯示不出來,當鼠標選擇這個區(qū)域是發(fā)現(xiàn)內(nèi)容確實在頁面。 解決辦法:對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面結(jié)構(gòu)盡量簡單。

    8.float的div閉合;清除浮動;自適應(yīng)高度;

    ① 例如:<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >這里的NOTfloatC并不希望繼續(xù)平移,而是希望往下排。(其中floatA、floatB的屬性已經(jīng)設(shè)置為 float:left;) 這段代碼在IE中毫無問題,問題出在FF。原因是NOTfloatC并非float標簽,必須將float標簽閉合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之間加上 < #div class=”clear”>這個div一定要注意位置,而且必須與兩個具有float屬性的div同級,之間不能存在嵌套關(guān)系,否則會產(chǎn)生異常。 并且將clear這種樣式定義為為如下即可: .clear{ clear:both;}

    ②作為外部 wrapper 的 div 不要定死高度,為了讓高度能自動適應(yīng),要在wrapper里面加上overflow:hidden; 當包含float的 box的時候,高度自動適應(yīng)在IE下無效,這時候應(yīng)該觸發(fā)IE的layout私有屬性(萬惡的IE啊!)用zoom:1;可以做到,這樣就達到了兼容。 例如某一個wrapper如下定義: .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

    ③對于排版,我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div后面做一個統(tǒng)一的背景,譬如:
    <\/div>
    <\/div>
    <\/div> <\/div> 比如我們要將page的背景設(shè)置成藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發(fā)現(xiàn)隨著left center right的向下拉長,而 page居然保存高度不變,問題來了,原因在于page不是float屬性,而我們的page由于要居中,不能設(shè)置成float,所以我們應(yīng)該這樣解決
    <\/div>
    <\/div>
    <\/div> <\/div> <\/div> 再嵌入一個float left而寬度是100%的DIV解決之

    ④萬能float 閉合(非常重要!) 關(guān)于 clear float 的原理可參見 [How To Clear Floats Without Structural Markup],將以下代碼加入Global CSS 中,給需要閉合的div加上 class=\"clearfix\" 即可,屢試不爽. \/* Clear Fix *\/ .clearfix:after { content:\".\"; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } \/* Hide from IE Mac *\/ .clearfix {display:block;} \/* End hide from IE Mac *\/ \/* end of clearfix *\/ 或者這樣設(shè)置:.hackbox{ display:table; \/\/將對象作為塊元素級的表格顯示}

    11.高度不適應(yīng) 高度不適應(yīng)是當內(nèi)層對象的高度發(fā)生變化時外層高度不能自動進行調(diào)節(jié),特別是當內(nèi)層對象使用margin 或paddign 時。 例: #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

    p對象中的內(nèi)容<\/p> <\/div> Solution: Add two empty div objects above and below the P object. CSS code: .1{height:0px;overflow:hidden;} or add a border attribute to the DIV.

    12. Why is there a gap under the image under IE6? There are many ways to solve this bug. You can change the layout of the html, or set the img to display:block or set the vertical-align attribute to vertical-align:top. | bottom |middle |text-bottom can be solved.

    13. How to align text and text input box with vertical-align:middle;

    14. There is a difference between id and class defined in web standards What's the difference? 1. Repeating IDs is not allowed in web standards. For example, div id="aa" is not allowed to be repeated twice, and class defines a class, which can theoretically be repeated infinitely, so definitions that need to be referenced multiple times can be Use him. 2. The priority of attributes. The priority of ID is higher than that of class. See Example 3 above. It is convenient for client scripts such as JS. If you want to perform script operations on an object in the page, you can define it for it. An ID, otherwise you can only find it by traversing the page elements and specifying specific attributes. This is a relative waste of time and resources, and is far less simple than an ID.

    15. After the content in LI exceeds the length, use an ellipsis Display method This method is applicable to IE and OP browsers

    16. Why can’t IE set the scroll bar color in web standards? The solution is to replace the body with html

    17. Why can't I define a container with a height of about 1px? This problem under IE6 is caused by the default line height. There are many solutions, such as: overflow: hidden | zoom:0.08 | line-height:1px

    18. How to make the layer display on top of FLASH? The solution is to set transparent for FLASH

    19. How to vertically center a layer in the browser. Here we use percentage absolute positioning, and the method of patching negative values ??outside. The size of the negative value is its own width and height divided by two< ;style type="text/css">

    FF and IE

    1. Div centering problem. The div is already centered when margin-left and margin-right are set to auto. IE No, IE needs to set the body to be centered. First define text-algin: center in the parent element; this means that the content within the parent element is centered.

    2. The border and background of the link (a tag). To add a border and background color to the a link, you need to set display: block and float: left to ensure no line breaks. Referring to menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge display. If height is not set, a space can be inserted in menubar.

    3. The problem that the hover style does not appear after the hyperlink is visited. The hyperlink style that is clicked and visited no longer has hover and active. Many people should have encountered this problem. The solution is to change the CSS properties. Sorting order: L-V-H-A Code:

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    /* intLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37); /* ]]> */

    13.為什么IE6下容器的寬度和FF解釋不同呢
    讓FireFox與IE兼容
    The difference in the problem is whether the overall width of the container includes the width of the border. Here IE6 interprets it as 200PX, while FF interprets it as 220PX. So what exactly causes the problem? If you remove the xml at the top of the container, you will find that the original problem lies here. The statement at the top triggers IE's qurks mode. For relevant knowledge about qurks mode and standards mode, please refer to: http://www.microsoft.com/china /msdn/library/webservices/asp.net/ ASPNETusStan.mspx?mfr=true

    IE6, IE7, FF IE7.0 is out, and there are new problems with CSS support. There are more browsers, and the compatibility of web pages is getting worse. We are still struggling. In order to solve the compatibility problem of IE7.0, I found the following article: Now I mostly use !important to hack, for ie6 and firefox The test can be displayed normally, but ie7 can correctly interpret !important, which will cause the page not to be displayed as required! The following is a compatibility collection of three browsers.

    The first is the CSS HACK method height:20px; /*For Firefox*/ *height:25px; /*For IE7 & IE6*/ _height :20px; /*For IE6*/ Pay attention to the order. This is also a CSS HACK, but it is not as simple as the above. #example { color: #333; } /* Moz */ * html #example { color: #666; } /* IE6 */ * html #example { color: #999; } /* IE7 */

    < !--[if lte IE 6]>

    The third method is the css filter method. The following is a classic translation from a foreign website. . Create a new css style as follows: #item { width: 200px; height: 200px; background: red; } Create a new div and use the previously defined css style:
    some text here< /div> Add the lang attribute here in the body expression, the Chinese is zh: Now define a style for the div element: *:lang(en) #item{ background:green !important; } This is done to overwrite the original css style with !important. Since the :lang selector is not supported by IE7.0, it will not have any effect on this sentence. Therefore, the same effect under IE6.0 is achieved, but it is very difficult. Unfortunately, Safari also does not support this attribute, so you need to add the following CSS style: #item:empty { background: green !important } : The empty selector is a CSS3 specification. Although Safari does not support this specification, it will still be used. Selecting this element, regardless of whether this element exists, will now be green on all browsers except IE. For compatibility with IE6 and FF, you can consider the previous !important. Personally, I prefer to use




    ------------------- ----------------------------------
    Reprinted from: http://68design.net/Web-Guide/ HTMLCSS/37154-1.html

    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

    Hot AI Tools

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    Explain the purpose of the role attribute in ARIA. Explain the purpose of the role attribute in ARIA. Jun 14, 2025 am 12:35 AM

    ARIA's role attribute is used to define the role of web elements and improve accessibility. 1. Role attribute helps assistive technology to understand the functions of elements, such as buttons, navigation, etc. 2. Use role attributes to assign specific roles to non-semantic HTML elements. 3. The role attribute should be consistent with the element behavior and be verified by the accessibility tool test.

    HTML and Design: Creating the Visual Layout of Websites HTML and Design: Creating the Visual Layout of Websites Jun 14, 2025 am 12:39 AM

    How to create a website layout? 1. Use HTML tags to define the content structure, such as, ,. 2. Control styles and positions through CSS, using box model, float or Flexbox layout. 3. Optimize performance, reduce HTTP requests, use cache and optimize images, and ensure responsive design.

    How can you ensure your HTML code is readable and maintainable? How can you ensure your HTML code is readable and maintainable? Jun 10, 2025 am 12:06 AM

    Improve the readability and maintainability of HTML code can be achieved through the following steps: 1. Use semantic tags, such as, etc. to make the code structure clear and improve SEO effect; 2. Keep the code formatted and use consistent indentation and spaces; 3. Add appropriate comments to explain the code intention; 4. Avoid excessive nesting and simplify the structure; 5. Use external style sheets and scripts to keep the HTML concise.

    How do I stay up-to-date with the latest HTML standards and best practices? How do I stay up-to-date with the latest HTML standards and best practices? Jun 20, 2025 am 08:33 AM

    The key to keep up with HTML standards and best practices is to do it intentionally rather than follow it blindly. First, follow the summary or update logs of official sources such as WHATWG and W3C, understand new tags (such as) and attributes, and use them as references to solve difficult problems; second, subscribe to trusted web development newsletters and blogs, spend 10-15 minutes a week to browse updates, focus on actual use cases rather than just collecting articles; second, use developer tools and linters such as HTMLHint to optimize the code structure through instant feedback; finally, interact with the developer community, share experiences and learn other people's practical skills, so as to continuously improve HTML skills.

    How do I use the  element to represent the main content of a document? How do I use the element to represent the main content of a document? Jun 19, 2025 pm 11:09 PM

    The reason for using tags is to improve the semantic structure and accessibility of web pages, make it easier for screen readers and search engines to understand page content, and allow users to quickly jump to core content. Here are the key points: 1. Each page should contain only one element; 2. It should not include content that is repeated across pages (such as sidebars or footers); 3. It can be used in conjunction with ARIA properties to enhance accessibility. Usually located after and before, it is used to wrap unique page content, such as articles, forms or product details, and should be avoided in, or in; to improve accessibility, aria-labeledby or aria-label can be used to clearly identify parts.

    How do I create a basic HTML document? How do I create a basic HTML document? Jun 19, 2025 pm 11:01 PM

    To create a basic HTML document, you first need to understand its basic structure and write code in a standard format. 1. Use the declaration document type at the beginning; 2. Use the tag to wrap the entire content; 3. Include and two main parts in it, which are used to store metadata such as titles, style sheet links, etc., and include user-visible content such as titles, paragraphs, pictures and links; 4. Save the file in .html format and open the viewing effect in the browser; 5. Then you can gradually add more elements to enrich the page content. Follow these steps to quickly build a basic web page.

    How do I create checkboxes in HTML using the  element? How do I create checkboxes in HTML using the element? Jun 19, 2025 pm 11:41 PM

    To create an HTML checkbox, use the type attribute to set the element of the checkbox. 1. The basic structure includes id, name and label tags to ensure that clicking text can switch options; 2. Multiple related check boxes should use the same name but different values, and wrap them with fieldset to improve accessibility; 3. Hide native controls when customizing styles and use CSS to design alternative elements while maintaining the complete functions; 4. Ensure availability, pair labels, support keyboard navigation, and avoid relying on only visual prompts. The above steps can help developers correctly implement checkbox components that have both functional and aesthetics.

    What is an HTML tag? What is an HTML tag? Jun 13, 2025 am 12:36 AM

    HTMLtagsareessentialforstructuringwebpages.Theydefinecontentandlayoutusinganglebrackets,ofteninpairslikeand,withsomebeingself-closinglike.HTMLtagsarecrucialforcreatingstructured,accessible,andSEO-friendlywebpages.

    See all articles