<button> 元素 的 type 属性取值可以是 button、reset、submit;在IE8及更新版本和其他现代浏览器中该属性默认值为 submit。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<title>xthml 验证溢出效果</title>
?
<style
type="text/css">
div{
???border:1px black solid;
???margin:100px;
???height:140px;
???overflow:visible;
}
.meaningful {
???width:500px;
???background:red;
}
.nonsense{
???width:400px;
???background:green;
}
?
</style>
</head>
<body>
???<!--英文-->
???<!--有意义的文本-->
???<div
class="meaningful">
??????english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.
???</div>
???<hr>
???<!--无意义的文本-->
???<div
class=‘nonsense‘>
??????<p>
?????????abcaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/>
?????????aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabcabcabcabcaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabcabcabcabcabcabcabcabcabcabcabcabcabc
??????</p>
???</div>
???<hr>
???<!--有边界的元素内图像-->
???<div>
??????<img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/>
???</div>
???<!--中文-->
???<hr>
???<div
class="meaningful">
??????中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。
???</div>
???<div
class=‘meaningful‘>
??????<p>
?????????中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!中文不会跑出去!
??????</p>
???</div>
???<!--无边界的图像-->
???<hr />
???<img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<title>h5 验证溢出效果</title>
<style>
div{
???border:1px blue solid;
???height:140px;
???margin:50px;
???overflow:visible;
}
.eng{
???width:400px;
???background:grey;
}
.cn{
???width:500px;
???background:red;
}
</style>
?
</head>
?
<body>
???<div
class="eng">
???<!--有意义的文本-->
??????in-div and outside-paragraph texts.in-div and outside-paragraph texts.in-div and outside-paragraph texts.in-div and outside-paragraph texts.in-div and outside-paragraph texts.in-div and outside-paragraph texts.in-div and outside-paragraph texts.in-div and outside-paragraph texts.
???</div>
???<div
class=‘eng‘>
??????<p>
??????<!--无意义的文本-->
?????????asdfasijfdasdkfjaksfdaksjkfajkdfjaksjfdasdfasijfdasdkfjaksfdaksjkfajkdfjaksjfdasdfasijfdasdkfjaksfdaksjkfajkdfjaksjfdasdfasijfdasdkfjaksfdaksjkfajkdfjaksjfdasdfasijfdasdkfjaksfdaksjkfajkdfjaksjfdasdfasijfdasdkfjaksfdaksjkfajkdfjaksjfdasdfasijfdasdkfjaksfdaksjkfajkdfjaksjfdasdfasijfdasdkfjaksfdaksjkfajkdfjaksjfd
??????</p>
???</div>
???<div>
??????<!--有边界的图像-->
??????<img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/>
???</div>
???<hr>
???<div
class="cn">
???<!--有意义的文本-->
??????div内段落外文字。div内段落外文字。div内段落外文字。div内段落外文字。div内段落外文字。div内段落外文字。div内段落外文字。div内段落外文字。div内段落外文字。div内段落外文字。div内段落外文字。
???</div>
???<div
class=‘cn‘>
??????<p>div内段落内文字。div内段落内文字。div内段落内文字。div内段落内文字。div内段落内文字。div内段落内文字。div内段落内文字。div内段落内文字。div内段落内文字。div内段落内文字。</p>
??????<!--无意义的文本-->
??????<p>去微软推哦怕是的法国红酒看来;自行车人的消息传出气氛佳伟峰皮卡史蒂夫去年危机的身份暖水瓶打开佛卡上的就非要你还不公布</p>
???</div>
???<hr />
???<!--无边界的图像-->
???<img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/><img
src="1.png"
/>
</body>
</html>