|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
/ _% I1 C9 h2 c# p" z J关键在于：max-width:780px;以及下面那行。! D6 j! {. ~! x3 l: e9 B
固定像素适应:
% G* W! O3 }: }. l
; |. Y5 F0 d, ]" s8 }9 b" _* U% Ndotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0> 以下是引用片段：
3 v5 U! t ?: G1 V<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 _7 b$ e9 G# {<html xmlns="http://www.w3.org/1999/xhtml";> ) P! c& I" c0 [/ F+ |. k" L& S7 R
<head>
, v; O" E e2 S- ~, _<meta http-equiv="Content-Type" c /> $ Q* I% c$ h2 D) k8 E
<title>css2.0 VS ie</title>
/ h# B' B" J8 E/ d- ^$ T8 E- G<style type="text/css"> 2 Y3 K x% E; p; o! y/ |
<!-- 0 F ?+ J* J) G8 A& B1 K8 q4 U
body {
d. U% c) d1 ^" \ r; {, P! Ffont-size: 12px;
- N- `3 z& d ]2 b6 ?) T$ D# ktext-align: center; % \3 f C* v" {; j- C( N
margin: 0px;
2 s' R. o* @9 d2 F' \$ o* W$ Mpadding: 0px;
4 d+ ^" z, R' q, G& m) W" Z2 b}
- \: g+ d( G; ^9 u5 J& L#pic{
+ n7 u* _+ P% E; ]. A E margin:0 auto; 6 f5 z) F6 L# V- w& i( J7 n+ B
width:800px;
# C+ A: {7 b% `# x+ n I padding:0; ( X+ @& R) B! Q% `# \$ E% I
border:1px solid #333;
! J0 i+ V' [: Z- o, z }
: K# Y2 M9 w u; b#pic img{
' `4 }9 c: H6 s2 B3 ?8 L max-width:780px;
1 o; V/ y# L' s3 u# Nwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 3 M" h. N. o; v2 `( v; d& F/ T K l
border:1px dashed #000; : f$ Q# Z, W$ [2 k
} 9 m i- C1 f' u
-->
. i# p* ^$ {+ n: {6 n O& q8 T</style>
% x( u2 y' Y4 C/ n$ F</head>
. ?5 _+ Q5 R2 [4 G" I# v1 `<body>
8 E/ l5 n3 n9 |6 p- O<div id="pic">
: m: Q& V W1 s9 \2 @<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
( H/ e$ C4 m. Q, I0 P9 e' ?</div>
) |6 `2 ^! j% R4 \; }( \0 _4 o8 g</body> 6 E( u- @. p% ?3 j
</html>
, z8 x/ n0 k, i. Z* t" ^! R! k$ k% A' G1 D$ @" c- Z
百分比适应:# V8 s2 B% b) r6 x* Y4 s
以下是引用片段：
1 n6 C9 A$ h% u4 b& i9 q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% g2 j" F2 y. w7 C4 X+ A<html xmlns="http://www.w3.org/1999/xhtml";> 5 C% M! d; G+ o8 i- H( d3 c
<head>
$ I) V$ q. S% W2 E<meta http-equiv="Content-Type" c />
( ]4 r; o3 I& @2 O, y<title>css2.0 VS ie</title> % K4 \& ~- g/ c. m4 t* z% o
<style type="text/css">
8 i' C) B/ k* w& Z' E* N9 ~* {# A0 M<!--
: f+ \. y! d9 w8 m! d% ^ n5 h( J3 Xbody { - L8 ^/ ~0 N+ I- M- Q1 r7 ?
font-size: 12px;
5 R w( O) C" g, Z. Ktext-align: center; . c7 T6 P6 s5 S+ g6 @, e1 ~+ }% V
margin: 0px; ! o! R9 ~' r! v) ?
padding: 0px;
* f$ }2 Z( F1 C6 _' | v3 R} $ P# L; `9 }! P* b
#pic{ 1 j- l: _- C8 t( @& f6 B$ K; J
margin:0 auto;
) T$ w: J) i6 i4 _ width:800px; ; s& N+ ^# v$ x9 W9 u6 p
padding:0; F) p; m2 v: [: s) R1 ~1 B3 k
border:1px solid #333; . {1 {9 \; \' f. h
} # l2 U% w& {3 o# e/ \/ I
#pic img{
% v" J; S7 S# N; g' Z max-width:780px; 1 A, ]& V1 c* R/ ~$ V. Q
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
/ {, F! o& S8 E& eborder:1px dashed #000; 7 D- [' e3 ?3 `8 w
}
" i/ k4 h3 t5 @9 j, Q--> 1 g+ I# I% l3 x1 g
</style> " E. A* { \* n" k- p7 F
</head>
% {. C; y2 N+ G8 _+ P m<body> 5 O8 H: y5 z3 h L3 E- Y
<div id="pic">
8 _; C. [. ~* a1 V; e# S% K m<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> * \+ q6 ?5 K- w: `
</div>
' @! y1 v2 B' m4 J5 C6 c# x</body>
9 v% q1 _( `" S. X0 ], v# Y</html> |
|
发表于 2007-12-8 14:55
| 