|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14171
- 金币
- 2376
- 威望
- 1647
- 贡献
- 1324
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
$ [9 V- c( f( R) ~2 e* F3 j关键在于：max-width:780px;以及下面那行。
. e/ O5 {* H- o; Y% c( ^0 {3 @固定像素适应:
D; f$ D' q6 X7 r! k. [; A* ^7 o# X
dotted; 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> 以下是引用片段：
* S) N7 y( R6 K! e: l! w<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: b! @, y8 y+ c<html xmlns="http://www.w3.org/1999/xhtml";> 1 }5 G, T& v1 u% {8 M
<head>
N, I; ^" ?) ~ A; ~* M- T<meta http-equiv="Content-Type" c />
1 D% S5 @: j1 [2 [( p<title>css2.0 VS ie</title> 0 o! m8 g; ?) _
<style type="text/css"> X% M& e" v' }. u
<!--
* G; {0 Q, {* j& Fbody { , o6 i. _& w; a+ a( `
font-size: 12px;
" k6 y4 l: b xtext-align: center; 0 g/ `2 [% h5 N6 U, V: R
margin: 0px;
& U1 \' V8 z1 L7 g Opadding: 0px; $ k C6 B* H' a9 O+ N
} 8 t9 ?" V% t9 T
#pic{
( t) [1 J7 w7 L- ~. ^ margin:0 auto; : `' @9 ]& Z8 @$ a7 ?4 B
width:800px; / u* q/ c/ I* c y. B6 W+ v( l
padding:0; & m; l2 X+ U: g: a4 @9 B
border:1px solid #333;
2 U3 ?6 r8 L+ N5 ]4 v( D: |7 Z% ~ } # ^3 a5 |2 u6 k
#pic img{
5 J* A, m# i) L! K7 w% u max-width:780px; - c/ `7 E( q$ @" V1 b
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 3 S( _& p0 c/ q- J
border:1px dashed #000;
" j& G$ a2 p4 A1 i- U' V} 8 |' C* w. t6 S; Q: d4 Z
-->
* \" B; K$ ?3 w7 s, I</style> 6 U7 j5 C: o) f# [' n) C1 f! V
</head> 3 B _( h( I D1 ^6 c- U& {' D
<body> ; ]. H+ N$ s) Y$ M" @) |
<div id="pic">
, C9 M/ J6 [% {3 c: o% }- z; B, h<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
3 m( A6 r% c- A7 L/ c</div>
( d" |" j- |8 B0 I" u( t</body>
' Q5 E8 O0 ], C: C8 V. h</html> / P2 v( P. f) [5 g. \) e
/ z$ l( `, L8 J- @( D+ c6 N百分比适应:
" O7 \. @8 i [以下是引用片段：
) `9 {" }5 D: q3 I<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% N/ J- z3 w* ]* {3 |' n<html xmlns="http://www.w3.org/1999/xhtml";>
0 l! ]0 T- g# t<head> % j) x4 G; V9 E9 ~) y( o5 }
<meta http-equiv="Content-Type" c /> 0 ^% d+ X0 C8 Y; a8 l% g
<title>css2.0 VS ie</title>
+ h: B5 H6 _+ k: {5 Q. O- R8 x<style type="text/css">
# ^& V. |7 l7 c( T% Y( l<!--
# a' A, @* b' l" h/ B7 d& @body { ; q# B$ |1 x$ \8 n9 |4 Q
font-size: 12px; # u4 y M' z: Q! q; Y
text-align: center;
( O' }5 O( H2 o8 d8 K0 m, u, H% Y6 Vmargin: 0px;
& [3 j: M# ]9 p6 h. U" Fpadding: 0px;
, R" a& q* c0 y' D' O" U}
& w: V. O& H7 r$ N#pic{
; o6 W, W: c( m margin:0 auto;
; [0 j3 R& W3 @9 y% f width:800px; 1 J4 d" Y1 e' y: A
padding:0;
# f1 N" f2 v+ O: e border:1px solid #333;
1 ~5 j; E3 S6 m1 i! ~ o/ Y0 I; \ } 9 Q6 k5 }5 d3 s: M
#pic img{ 1 m" n- ^5 G6 n3 i0 y5 e
max-width:780px;
; l8 L1 j% Y/ Fwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); & _* X. H" l) c2 l* k- f- u
border:1px dashed #000; ; Z |3 \% u2 Y! p* X) ]. I! y6 `& B
} / z# V: ]& |- [8 c
-->
7 Q1 b1 H6 I' ^: B</style> + k" `, \% y. f f
</head> $ \! K a) R1 {# h0 L
<body>
* T( p( u; [/ T2 W% K* a' v2 I0 M, c<div id="pic"> W8 U0 e+ t/ V. E
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , J3 p+ y5 |1 z" X, @5 V2 F5 ^
</div>
4 y/ A5 [$ S- `6 a# N8 ~! l- w3 B</body>
! q' M* @7 g& f) L) c. j$ W</html> |
|
发表于 2007-12-8 14:55
| 