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"></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"></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

Docker image creation and one-click packaging and deployment of the entire project

Solution to span width not being determined in Firefox or IE

Docker image creation and one-click packaging and deployment of the entire project

Summary of MySQL's commonly used concatenation statements

Absolute path URL and relative path URL in html and subdirectory, parent directory, root directory

Solution to the problem that Docker container cannot be stopped or killed

How to use the HTML form attributes readonly and disabled

Detailed tutorial on MySql installation and uninstallation

Problems and solutions when installing and using VMware

Example of implementing element table row and column dragging

Practical record of handling MySQL automatic shutdown problems

Writing a shell script in Ubuntu to start automatically at boot (recommended)

Recommend

Detailed explanation of the three major front-end technologies of React, Angular and Vue

Linux bridge method steps to bridge two VirtualBox virtual networks

Native js to achieve accordion effect

Detailed explanation of routing configuration in Linux system with multiple network cards

MySQL SQL statement performance tuning simple example

Sample code for cool breathing effect using CSS3+JavaScript

Vue+Element realizes paging effect

Solution to navicat automatically disconnecting from the database after a period of time

Vue storage contains a solution for Boolean values

Detailed explanation of KVM deployment of three virtual machines to implement WordPress experiment

Use a table to adjust the format of the form controls to make them look better

Detailed explanation of the construction and use of Docker private warehouse

Briefly understand the MYSQL database optimization stage

Detailed explanation of JS ES6 coding standards

Introduction and use of triggers and cursors in MySQL