html、css日常问题记录

最新推荐文章于 2023-09-22 10:53:32 发布

Vanderm

最新推荐文章于 2023-09-22 10:53:32 发布

阅读量339

点赞数

本文链接：https://blog.csdn.net/Vanderm/article/details/52401684

版权

1）Chrome浏览器下input背景色调整

Chrome浏览器下input会自动填写，背景颜色变为黄色，可以在css中添加下面代码解决

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

在ie下input background图片是可以显示的。遇到有背景图的情况还是重新布局吧...

2）常用居中方式

在未使用绝对定位的情况下上下居中

vertical-align:middle;

左右居中，dv宽度和父级要定义好

margin:0px auto;

3）dom透明设置

ie8以下版本不能使用opacity属性，浏览器会自动选择能够执行的语句，同时添加下面代码就可以解决。

filter:alpha(opacity=0);opacity:0;

4）input焦点控制

<span style="font-size:10px;"><!DOCTYPE html>
<html>
<head>
<style>
input:focus
{
background-color:yellow;
}
</style>
</head>
<body>

<p>在文本框中点击，您会看到黄色的背景：</p>

<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>

<p><b>注释：</b>如果 :focus 用于 IE8 ，则必须声明 <!DOCTYPE>。</p>

</body>
</html> 注：来自http://www.w3school.com.cn/tiy/t.asp?f=css_sel_focus</span><span style="font-size:24px;">
</span>

5)reset.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

6)IE input 输入框叉号删除