Solution to span width not being determined in Firefox or IE
|
Copy code The code is as follows:<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Test Span</title> <mce:style type="text/css"><!-- span { background-color:#ffcc00; width:150px; } --></mce:style><style type="text/css" mce_bogus="1">span { background-color:#ffcc00; width:150px; }</style> </head> <body> fixed <span >width</span> span </body> </html> After testing, I found that it is invalid, whether in Firefox or IE. By consulting the definition of width in the CSS2 standard, it is found that the width attribute in CSS is not always valid. If the object is an inline object, the width attribute will be ignored. Firefox and IE originally did this to follow the standards. Changing span to block type and setting float is not a perfect solution Add the display attribute to the span's CSS and set the span to a block-type element. This will indeed change the width, but will also put the preceding and following text in different lines. In this way, span actually becomes div completely. Copy code The code is as follows:span { background-color:#ffcc00; display:block; width:150px;} Many people would suggest adding a CSS property float, which can indeed solve the problem under certain conditions. For example, in our example, if there is no text before the span, it is indeed feasible. But if it is there, the text before and after will be connected together, and the span will run to the second line. Copy code The code is as follows:span { background-color:#ffcc00; display:block; float:left; width:150px;} The perfect solution for setting span width The CSS definition in the following code perfectly solves the problem of setting the span width. Since browsers usually ignore unsupported CSS properties, it is best to write the display:inline-block line at the end, so that in Firefox, if Firefox 3 is released in the future, this line will work and the code can be compatible with various versions at the same time. Copy code The code is as follows:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head><title>Test Span</title> <mce:style type="text/css"><!-- span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; width:150px;} --></mce:style> <style type="text/css" mce_bogus="1">span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; width:150px;}</style> </head> <body> fixed <span>width</span> span </body> </html> |
<<: Detailed process of getting started with docker compose helloworld
>>: Common DIV tasks (Part 2) — Transform into editors and various DIY applications of DIV
Recommend
Detailed explanation of the error problem of case when statement
Preface In the MySQL database, sometimes we use j...
Web Design Principles of Hyperlinks
<br />Related articles: 9 practical tips for...
Detailed explanation of the steps to create a web server with node.js
Preface It is very simple to create a server in n...
Detailed explanation of how to deploy SpringBoot in docker and replace jar packages
Table of contents Project Directory Dockerfile Fi...
Detailed installation process of mysql5.7.21 under win10
This article shares the installation of MySQL 5.7...
Detailed explanation of the principle and function of Vue list rendering key
Table of contents The principle and function of l...
MySQL string splitting example (string extraction without separator)
String extraction without delimiters Question Req...
Implementation of TypeScript in React project
Table of contents 1. Introduction 2. Usage Statel...
Sample code for testing technology application based on Docker+Selenium Grid
Introduction to Selenium Grid Although some new f...
How to position the header at the top using CSS sticky layout
Application scenarios: One of the new requirement...
MySQL 8.0.16 compressed version download and installation tutorial under Win10 system
Download from official website: https://www.mysql...
React sample code to implement automatic browser refresh
Table of contents What is front-end routing? How ...
Share the responsive frameworks commonly used by web design masters (summary)
This article introduces and shares the responsive...
CSS specification BEM CSS and OOCSS sample code detailed explanation
Preface During project development, due to differ...
How to use gdb to debug core files in Linux
1.core file When a Segmentation fault (core dumpe...