css+div中，用<div><div>，字符可以换行，用<pre><pre>,空格、换行可以显示出来。怎么用才能兼容？

html-css011

css+div中，用<div><div>，字符可以换行，用<pre><pre>,空格、换行可以显示出来。怎么用才能兼容？,第1张

最兼容的方法是用<div></div>标签分块，div标签本身有换行效果。列表的换行用<div>，<li>都可以。用<br />换行也可。搜狗高速浏览器对标签的要求比较严格，所以标签格式严谨很重要。再有万恶的IE6会有很多bug与独特性，这个没办法，要么放弃IE6，要么用心体验做成兼容。其实代码规范基本很少会遇到兼容问题。但是把大多数兼容规避掉，是个很漫长的过程。

两点建议：

1、最好让换行标签包裹不换行标签，而尽量不要反过来用（换行标签：<div><li>等，不换行标签：<a><span>等）

2、格式严谨

一般需要用到JQuery来控制pre的文字字体大小：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<script src="

<script type="text/javascript">

$(function(){

var domH = $('.msg').height()  

//外框的高度

var fsize = domH/3       

//要改变的文字尺寸

$('.donH').html('外框高度为：'+domH+'px'+'，'+'文字大小为：'+fsize+'px')

$('.word').css('font-size',fsize)//改变文字的size

})

</script>

<style type="text/css">

* {

margin: 0

padding: 0

}

.demo{

margin: 0 0 0 100px

}

.msg {

width: 300px

text-align: center

box-sizing: border-box

border: 1px solid #000000

}

</style>

<body>

<div class="demo">

<div class="donH">

</div>

<div class="msg">

示例文字<br> 随外框高度改变的文字：

<strong class="word" style="color: red">9999元</strong>

</div>

</div>

</body>

</html>