The reason why li inside-block is invalid in IE11
Recently I was making a list of web page tags, which required no line breaks. I thought it would be easier at first, and I finished writing the code in a few seconds, and passed the test in Firefox and Chrome browsers. However, when I looked at it in IE11, it was unexpected. Did not achieve the expected effect, li inside-block is invalid in IE11! Still changing the line!
#li inside-block still wraps in IE11?
li inside-block still wraps in IE11! Why doesn't it work? Does the code still need to hack IE11? But I saw that the writing method on other people’s websites does not hack IE11.
In fact, the code is quite simple, and it fully achieves the expected results in Chrome and Firefox browsers.
The core css code is as follows:
ul li{
display:inline-block;
padding:3px 4px 3px 4px;
margin:3px 3px 3px 0px;
}Use display:inline-block to set the li list without line breaks.
The core code of html is as follows:
<ul>
<li>tag1</li>
<li>tag2</li>
<li>tag3</li>
</ul>The effect should be like this:
Use display:inline-block to set li enumeration No line breaks
Instead of this:
Without display:inline-block li lists line breaks
Find IE11 in the Jingdong web page html code Reasons for invalidity
The above problem bothered me for several days. I once gave up the code method listed in li and adopted the writing method of div, but I was still unwilling to do so because the writing method of li was the right way and the code More concise.
Today I was browsing the mobile phone on Jingdong.com, and the tag list in the side column attracted me. By looking at the html source code of its web page, I found that it was also implemented using li enumeration and display:inline-block.
JD’s tag list
I am determined to find the tag list code that also supports IE11 from this webpage of JD.com.
We can’t wait any longer and take action immediately.
Create a new html file in the locally built debugging environment, copy the html source code of the Jingdong webpage, and then use the "exclusion method" to gradually delete the code until only the DIV listed in this tag is left.
After a period of code deletion work, the remaining code will become less and less, and the answer should become more and more clear.
The hard work paid off, and we finally found the answer! The problem that has been bothering me for many days is finally solved!
It turns out that this sentence needs to be added to the web page
:This sentence means that this webpage does not use IE Compatibility View.
IE Compatibility View uses lower versions of IE browsers to render web pages to avoid confusion in web page layout. But now we understand that compatibility view will obliterate certain styles and make certain areas of the web page invisible. The layout does not achieve the expected results. Therefore, when designing a web page, we should tell the IE browser not to use compatibility view to render this web page.
The above is the detailed content of The reason why li inside-block is invalid in IE11. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
What are HTML5 data attributes?
Aug 06, 2025 pm 05:39 PM
HTML5dataattributesarecustom,validHTMLattributesusedtostoreextrainformationinelementsforJavaScriptorCSS.1.Theyaredefinedasdata-*attributes,likedata-user-id="123".2.Theyallowembeddingprivate,customdatadirectlyinmarkupwithoutaffectinglayoutor
What is the aside element for in HTML5?
Aug 12, 2025 pm 04:37 PM
Theelementshouldbeusedforcontenttangentiallyrelatedtothemaincontent,suchassidebars,pullquotes,definitions,advertisements,orrelatedlinks;2.Itcanbeplacedinsideoroutsideanarticledependingoncontext;3.ItisasemanticelementthatenhancesaccessibilityandSEObyp
How to play multiple audio files sequentially in HTML5?
Aug 25, 2025 pm 03:08 PM
You can play multiple audio files in sequence by listening to the ended event of HTML5 audio elements. First, the clear answer is to use the ended event to trigger the next audio playback; the specific steps are: 1. Define the audio file array and obtain the audio element; 2. Set the current playback index, load and play the first audio; 3. Bind the ended event for the audio element, increment the index when the event is triggered and the next audio is loaded; 4. You can choose to realize loop playback or stop after the playback is finished; 5. You can preload the next audio to improve the experience; 6. Add error processing to skip failed audio; 7. Pay attention to the browser's autoplay restrictions, and the first playback needs to be triggered by user interaction to ensure that subsequent playback is not blocked, and the whole process passes
What is the readonly attribute in HTML5?
Aug 08, 2025 am 11:55 AM
ThereadonlyattributeinHTML5makesforminputsnon-editablewhilestillallowingsubmissionanduserinteraction;1.Itappliestoandelements;2.Itisabooleanattribute,soonly"readonly"needstobepresent;3.Unlike"disabled",itallowsfocusandthedataisinc
What are the supported audio formats in HTML5?
Aug 05, 2025 pm 08:29 PM
HTML5 audio format support varies from browser to browser. The most commonly used formats include: 1.MP3 (.mp3, audio/mpeg, supported by all mainstream browsers, with the best compatibility); 2.WAV (.wav, audio/wav, support better but large files, suitable for short audio); 3.OGG (.ogg/.oga, audio/ogg, Chrome, Firefox, Opera support, Safari and IE are not supported, open source free); 4.AAC (.aac/.m4a, audio/aac, Safari, Chrome, Edge support, Firefox support is limited, often used in Apple devices). To ensure compatibility, the
How to create a simple HTML5 webpage
Aug 12, 2025 am 11:51 AM
To create a simple HTML5 web page, you need to first use the declaration document type, and then build a basic structure containing, and, which sets the character encoding, viewport and title, add visible content such as title, paragraph, link, pictures and lists. Save it as a .html file and open it directly in the browser for viewing, without server support. This is the basis of a complete and effective HTML5 page.
What is the difference between and in HTML5?
Aug 04, 2025 am 11:02 AM
Please clarify the two HTML5 elements or attributes you want to compare, such as versus, versus, or id with class, so that I can provide a clear and practical explanation of the difference.
How to create a color picker in an HTML5 form?
Aug 08, 2025 am 03:48 AM
Use type="color" to create an HTML5 color selector, 1. Use add color input; 2. You can set the default color value through the value attribute (must be in a 7-character hexadecimal format such as #ffffff); 3. All modern browsers support it, and older browsers will fall back to text input; 4. You can preview color changes in real time with JavaScript; 5. Label tags should be added to improve accessibility, and JavaScript library can be used to provide downgrade support when necessary. This method is simple, effective and widely supported.
