两个常见的CSS问题-站长杂谈下载

两个常见的CSS问题

来自版块: 站长杂谈发表于: 2015-8-17 10:15:38
29845
0
如本资源下载地址失效,请点击此处进行反馈
开通本站Svip会员,全站资源免费下
  因为引起这两个问题的情况不是很常见,所以很容易被模板制作者所忽略。我一般是在本地测试环境中建有一个测试日志,专门测试此类问题。
  第一个问题更常见,就是纯英文和长英文 (如超长的网址、代码等) 的转行问题。一种是在日志中的正文,一种是在<pre>和<code>中的代码。经过我反复的调试,最后找到了一个样式组合,在常见的浏览器上都没有问题。我的CSS样式如下
  1. body, div, p, pre, code {
    9 G: i! D6 `+ q( k- i+ ?
  2. word-wrap:break-word;
    $ O. t2 N# Z& t8 q* Q8 W( `3 p
  3. }
    % b; y: q, o$ `$ {7 N& C# U& y8 |0 u
  4. pre, code {
    2 {+ I' i8 n& \0 ]" ^/ x7 h/ f6 x
  5. white-space:pre-wrap;
      d9 f! T0 m" r( A1 O0 {8 h8 v
  6. }
复制代码
  第二个问题就是当日志中设置成文字环绕图片的格式,并且图片后面的文字恰恰很少,就很容易引起错位。这种情况很少见,几乎可以忽略,不过能够预防一下,总不是坏事吧。解决方法也很简单,就是像对付 float 的对像那样,在日志的内容显示代码
  1. <?php echo $log_content; ?>
复制代码
  后面加上一句:
  1. <div class="clear"></div>
复制代码
  这是“.clear”的CSS代码:
  1. .clear {clear:both; height:1px; overflow:hidden;}
复制代码
  常见的写法是“<br style="clear:both;" />”,不过有时候它的间距显得太大,所以我单独写了一个CSS样式,以便反复引用。

4 a4 Q& \9 K, O9 Z
  最后附上我的本地测试帖效果:

, w9 A- N" n  j$ F* G
- |6 D/ A7 p8 `. T% Q; c7 _  k

全部评论 0

您需要登录后才可以回帖 立即登录
登录
0
0
0
返回顶部