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

Analysis of Mysql transaction characteristics and level principles

Solution to span width not being determined in Firefox or IE

Analysis of Mysql transaction characteristics and level principles

Implementation of removing overlapping time and calculating time difference in MySQL

Analysis of the principle and usage of MySQL continuous aggregation

Tic-Tac-toe game implemented in pure CSS3

How to understand the difference between ref toRef and toRefs in Vue3

Detailed explanation of the principle of creating tomcat in Eclipse

JavaScript Snake Implementation Code

Interactive experience trends that will become mainstream in 2015-2016

Use of vuex namespace

How to align text boxes in multiple forms in HTML

Recommend

Detailed example of installing FastDfs file server using docker compose

MySQL 5.7.17 installation and use graphic tutorial

JS array deduplication details

On Visual Design and Interaction Design

How to recover data after accidentally deleting ibdata files in mysql5.7.33

Does the % in the newly created MySQL user include localhost?

Detailed explanation of how to set the change value within a specified time in Zabbix

The top fixed div can be set to a semi-transparent effect

JavaScript two pictures to understand the prototype chain

A brief analysis of the problem of Mysql 8.0 version driving getTables to return all database tables

Introduction to the use of this in HTML tags

Detailed explanation of using Docker to build externally accessible MySQL

CSS cleverly uses gradients to achieve advanced background light animation

How to draw special graphics in CSS

Detailed explanation of for loop and double for loop in JavaScript