关于页面上输出斜线的折中处理-优快云博客

在Web项目中尝试通过div实现复杂图案显示导致浏览器崩溃问题后，最终采用图片方案进行优化，有效解决了显示问题并提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前有接到一个需求，需要在网页上输出斜线。项目是web项目，没用flex，google一把找到一个n年前用div输出点花图的介绍，实际测试后发现，一旦迭代层数较多，则会让浏览器崩溃。后来改用图片。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
<div style="border:1px solid blue;width:720px;">
 <div style="position:relative;float:left;">
 <img src="箭头/first_s.gif" style="position:absolute;left:130px;top:20px;"/>
  <img src="箭头/second_s.gif" style="position:absolute;left:130px;top:20px;"/>
   <img src="箭头/third_s.gif" style="position:absolute;left:130px;top:20px;"/>
<span style="width:70px;margin:10px 0px 0px 50px;float:left;">AAAAA<img src="48X48/user.png" width="30px;" height="30px;" /></span>
<span style="width:70px;margin:10px 0px 0px 100px;"> <img src="48X48/user.png" width="30px;" height="30px;"/>BBBB</span>
<span style="width:70px;margin:60px 0px 0px 230px;display:block;"> <img src="48X48/user.png" width="30px;" height="30px;"/>CCCC</span>
<span style="width:70px;margin:60px 0px 0px 230px;display:block;"> <img src="48X48/user.png" width="30px;" height="30px;"/>DDDD</span>
</div>
<div style="position:relative;float:left;">
 <img src="箭头/first_s.gif" style="position:absolute;left:130px;top:20px;"/>
  <img src="箭头/second_s.gif" style="position:absolute;left:130px;top:20px;"/>
   <img src="箭头/third_s.gif" style="position:absolute;left:130px;top:20px;"/>
<span style="width:70px;margin:10px 0px 0px 50px;float:left;">AAAAA<img src="48X48/user.png" width="30px;" height="30px;" /></span>
<span style="width:70px;margin:10px 0px 0px 100px;"> <img src="48X48/user.png" width="30px;" height="30px;"/>BBBB</span>
<span style="width:70px;margin:60px 0px 0px 230px;display:block;"> <img src="48X48/user.png" width="30px;" height="30px;"/>CCCC</span>
<span style="width:70px;margin:60px 0px 0px 230px;display:block;"> <img src="48X48/user.png" width="30px;" height="30px;"/>DDDD</span>
</div>
<div style="position:relative;float:left;">
 <img src="箭头/first_s.gif" style="position:absolute;left:130px;top:20px;"/>
  <img src="箭头/second_s.gif" style="position:absolute;left:130px;top:20px;"/>
   <img src="箭头/third_s.gif" style="position:absolute;left:130px;top:20px;"/>
<span style="width:70px;margin:10px 0px 0px 50px;float:left;">AAAAA<img src="48X48/user.png" width="30px;" height="30px;" /></span>
<span style="width:70px;margin:10px 0px 0px 100px;"> <img src="48X48/user.png" width="30px;" height="30px;"/>BBBB</span>
<span style="width:70px;margin:60px 0px 0px 230px;display:block;"> <img src="48X48/user.png" width="30px;" height="30px;"/>CCCC</span>
<span style="width:70px;margin:60px 0px 0px 230px;display:block;"> <img src="48X48/user.png" width="30px;" height="30px;"/>DDDD</span>
</div>
<div style="position:relative;float:left;">
 <img src="箭头/first_s.gif" style="position:absolute;left:130px;top:20px;"/>
  <img src="箭头/second_s.gif" style="position:absolute;left:130px;top:20px;"/>
   <img src="箭头/third_s.gif" style="position:absolute;left:130px;top:20px;"/>
<span style="width:70px;margin:10px 0px 0px 50px;float:left;">AAAAA<img src="48X48/user.png" width="30px;" height="30px;" /></span>
<span style="width:70px;margin:10px 0px 0px 100px;"> <img src="48X48/user.png" width="30px;" height="30px;"/>BBBB</span>
<span style="width:70px;margin:60px 0px 0px 230px;display:block;"> <img src="48X48/user.png" width="30px;" height="30px;"/>CCCC</span>
<span style="width:70px;margin:60px 0px 0px 230px;display:block;"> <img src="48X48/user.png" width="30px;" height="30px;"/>DDDD</span>
</div>
</div>
 
 </BODY>
</HTML>