Web Standard FAQ Collection

Source: Internet
Author: User
Tags define object definition class definition insert net reference relative
Web|web Standard | set | problem

Lists some common questions that beginners often ask. Examples and explain the solution.

1. The problem that hover style does not appear after the hyperlink is accessed

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--a:link {color:red}a:hover {color:blue}a:visited {color: green}a:active {color:orange}--></style><a href= "#" > Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQs website Standards FAQ Web Standard FAQ Web Standard FAQ Web Standards FAQ website Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standards FAQ </a>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

The hyperlink style that has been clicked is not hover and active, many people should have encountered this problem, the solution is to change the order of CSS attributes: l-v-h-a

2.FF how to make consecutive long fields wrap automatically

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--div {width:300px;word-wrap:break-word;border:1px solid red ;} --></style><div id= "FF" > Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</ Div><script type= "Text/javascript" >/* <! [cdata[*/function Tobreakword (intlen) {var Obj=document.getelementbyid ("ff"); var strcontent=obj.innerhtml; var strtemp= "" while (Strcontent.length>intlen) {strtemp+=strcontent.substr (0,intlen) + ""; Strcontent=strcontent.substr (intlen,strcontent.length); }strtemp+= "" +STRCONTENT;OBJ.INNERHTML=STRTEMP;} if (document.getElementById &&!document.all) Tobreakword (Panax)/*]]> */</script>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

It is well known that IE is used directly.
Word-wrap:break-word
On it, here in FF we use the JS Insert method to solve

3.ff Why the height of the parent container is not adaptive

Run code box
<!" DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--div {width:200px;border:1px solid red}p {float:left;width : 100px;} --></style><div><p> Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQs website Standards FAQ Web Standard FAQ Web Standard FAQ Web Standards FAQ website Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQs website Standards FAQ Web Standard FAQ Web Standard FAQ Web Standards FAQ website Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQs website Standards FAQ Web Standard FAQ Web Standard FAQ Web Standards FAQ website Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web standards Frequently Asked Questions Daquan Web Standards FAQ website Standard FAQ Web Standard FAQ Web Standard FAQs FAQ Web Standard FAQ Web Standards FAQ </p> </div>

Why is this p not open div? The solution is to insert between the DIV and P
<div style= "Clear:both" ></div>
Clear off the float of this p

4. Double margin Bug for IE6

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" Text/css ">body {margin:0}div {float:left;margin-left:10px;width:200px; height:200px;border:1px solid Red}</style><div><a href= "#" > Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQs website Standards FAQ Web Standard FAQ Web Standard FAQ Web Standards FAQ website Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standards FAQ </a></div>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

Float after the original outside distance of 10px, but IE interpreted as 20px, the solution is to add display:inline

5. The problem that the text in the container that is absolutely positioned under IE6 cannot be selected correctly

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" Text/css ">div {position:absolute;top:100px;left:100px;width:200px;height : 200px;border:1px solid Red}</style><div><a href= "#" > Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQs website Standards FAQ Web Standard FAQ Web Standard FAQ Web Standards FAQ website Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standards FAQ </a></div>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

The above problem exists in IE6, 7, the solution is to let ie into the qurks mode. For information about Qurks mode, please refer to:http://www.microsoft.com/china/msdn/library/webservices/asp.net/
Aspnetusstan.mspx?mfr=true

6. Under the IE6 why the picture below has the gap to produce

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--div {border:1px solid red;background:orange;} img {width:276px;height:110px;} --></style><div></div>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

There are a number of ways to fix this bug, either by changing the layout of HTML or by setting IMG as Display:block
or set the Vertical-align property to Vertical-align:top | Bottom |middle |text-bottom
can be solved.

7. There's a gap between the two layers under the IE6.

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" Text/css "><!--. Left {float:left;width:100px;height:100px;background: red}.right {width:100px;height:100px;background:orange}--></style><div class= "left" >aaaaaa</ Div><div class= "right" >aaaaaa</div>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

This IE 3PX bug also appears frequently, the solution is to give. Right also floats float:left or relative IE6 definition. Left margin-right:-3px;

8. List-style-image can not accurately locate the problem

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--li {list-style:url ("/uploadpic/2007-7/20077714380840.gif ");} Li a {position:relative;top:-5px;font:12px/25px song body;} --></style><ul><li><a href= "#" >web Standard FAQ </a></li><li><a href= " # ">web Standard FAQ </a></li><li><a href=" # ">web Standard FAQ </a></li><li> <a href= "#" >web Standard FAQ </a></li><li><a href= "#" >web Standard FAQ </a></li> </ul>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

This list-style-image positioning problem is also often asked, the solution is generally using Li's background simulation, here using the relative positioning method can also be solved

9. The method of displaying the ellipsis after the content exceeds the length in Li

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--li {width:200px;white-space:nowrap;text-overflow: ellipsis; -o-text-overflow:ellipsis; Overflow:hidden;} --></style><ul><li><a href= "#" >web Standard FAQ Web Standard FAQ </a></li><li> <a href= "#" >web Standard FAQ Web Standard FAQ </a></li><li><a href= "#" >web Standard FAQ Web Standard FAQ </a></li><li><a href= "#" >web Standard FAQ Web Standard FAQ </a></li><li><a href = "#" >web Standard FAQ Web Standard FAQ </a></li></ul>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

This method works with IE and op browsers

What is the difference between defining ID and class in the 10.web standard?

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--#aa {color:red}.aa {color:blue}--></style>< Div id= "AA" class= "AA" >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

A. Web standards are not allowed to duplicate IDs, such as Div id= "AA" does not allow repeat 2 times, and class definition is a class, theoretically can be infinitely repetitive, so need to refer to the definition of multiple references can use him.

Two. Priority issues for attributes
ID priority is higher than class, look at the example above

Three. Convenient JS and other client-side script, if you want to script an object on the page, you can define an ID, otherwise only the use of traversal page elements plus the specified specific attributes to find it, this is a relatively waste of time resources, far less than a simple ID.

11. How To center text vertically

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--div {height:30px;line-height:30px;border:1px solid red}-- ></style><div>web Standard FAQ </div>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

Set a container to the same height as the top of the line.

12. How to align text with the input basket

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--input {width:200px;height:30px;border:1px solid red;} --></style><input type= "Text"/>aaaaaaaaaaaaaaaaaa
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

If you encounter this problem, set the text box's
Vertical-align:middle
It's okay.

13. Why is the FF not horizontally centered below?

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--body {text-align:center;} div {margin:0 auto;width:500px;height:200px;border:1px solid red}--></style><div></div>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

FF set the container to the left and right outside the patch for auto on it

14. Why ff under the text can not open the height of the container

Run code box
<!" DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--div {width:200px;height:200px;border:1px solid red}--> </style><div> Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQs website Standards FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ website standard common Web Standard FAQ Web Standard FAQ Web Standard FAQ website Quasi FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard common Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standards FAQ Web standards Common Questions Web Standard common Web Standard FAQ Web Standard FAQ Web Standard FAQ website Standards FAQs Web Standard FAQ Web Standard FAQ Web Standard FAQ website Standard FAQ Web Standards Common Web Standards FAQ Web Standard FAQ FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQs website Standards FAQ Web Standard FAQ Web Standard common Web Standard FAQ Web Standards FAQ Web Standard FAQs website Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Encyclopedia Web Standard FAQ Web Standard common </div>
[Ctrl + A All selection tips: You can modify some of the code first, and then run the

Standard browser fixed height value of the container is not as IE6 as the open, then I want to fixed height, but also want to be able to be stretched how to set it?  method is to remove the height set min-height:200px; Here to take care of the IE6 that don't know min-height can be defined like this:
{
Height:auto!important;
height:200px;
min-height:200px;
}

15. Why is the width of the container under IE6 different from the FF interpretation?

Run Code Box
<?xml version= "1.0" encoding= "gb2312"? ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--div {cursor:pointer;width:200px;height:200px;border:10px Solid red}--></style><div >web Standard FAQ </div><pr/>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

The difference is that the overall width of the container does not include the width of the border (border) in it, here IE6 interpreted as 200PX, and FF is interpreted as 220PX, that is how to cause the problem? Everyone to the container at the top of the XML removed will find the original problem in this, the top of the statement triggered by IE Qurks mode, about Qurks mode, standards mode of knowledge, please refer to:http://www.microsoft.com/ china/msdn/library/webservices/asp.net/
Aspnetusstan.mspx?mfr=true

16. Why IE cannot set the scroll bar color in web standards

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--body {scrollbar-face-color: #f6f6f6; Scrollbar-highlight-color: #fff; Scrollbar-shadow-color: #eeeeee; Scrollbar-3dlight-color: #eeeeee; Scrollbar-arrow-color: #000; Scrollbar-track-color: #fff; Scrollbar-darkshadow-color: #fff;} --></style><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/ ><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/ ><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/ ><br/><br/>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

The solution is to replace the body with HTML

17. Why do I define a style that doesn't work?

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--#aa ul li {color:red}.aa {color:blue}--></style> <div id= "AA" ><ul><li class= "AA" > Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQs website Standards FAQ Web Standard FAQ Web Standard FAQ Web Standards FAQ website Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standards FAQ </li></ul></div>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

You can't use it here. AA definition to li How to solve this situation? The answer is to improve. AA priority such as #aa UL LI.AA priority related articles reference-baidu search keywords: CSS priority

18. Why cannot define a container of about 1px height

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--div {background:red;} --></style><div> </div>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

IE6 This problem is due to the default row height caused by the resolution of a number of ways, such as: Overflow:hidden | zoom:0.08 | line-height:1px

19. Why this background color cannot be displayed

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" Text/css "><!--ul {background:red}li {float:left;width:180px;} --></style><ul><li>web Standard FAQ </li><li>web Standard FAQ </li><li> Web Standard FAQ </li><li>web Standard FAQ </li><li>web Standard FAQ </li><div style= "Clear:both "></div></ul>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

IE set the background color of the UL does not show up, this belongs to the haslayout problem,

20. How can I let the layer display above flash?

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--div {position:absolute;top:20px;left:20px;width:200px; Height:200px;background:red}object {width:500px;height:100px;} --></style><div> Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQs website Standards FAQ Web Standard FAQ Web Standard FAQ Web Standards FAQ website Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ Web Standard FAQ </div><object type= "Application/x-shockwave-flash" Data= "/uploadpic/ 2007-7/20077714380533.swf "><param name=" movie value= "/uploadpic/2007-7/20077714380533.swf"/></ Object>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

The solution is to set the flash transparent
<param name= "wmode" value= "Transparent"/>

21. How to align a layer vertically in the browser

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--div {position:absolute;top:50%;left:50%;margin:-100px 0 0- 100px;width:200px;height:200px;border:1px solid red; --></style><div>web Standard FAQ </div>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

Here we use percent absolute positioning, a negative value for the outer patch, and a negative value divided by two for its width height.

22. Picture vertical and inside the container

Reference:http://bbs.blueidea.com/thread-2666987-1-1.html

23. How to arrange the div horizontally

Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/><style type=" text/css "><!--div {float:left;width:200px;height:200px;border:1px solid Red}--></style><div>web Standard FAQ </div><div>web Standard FAQ </div><div> Web Standard FAQ </div>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

The horizontal div can use floating methods such as Float:left, or set objects inline, you can absolutely locate objects, and so on.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.