html5中的padding,HTML5 placeholder css padding

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I've seen this post already and tried everything I could to change the padding for my placeholder but alas, it seems it just doesn't want to cooperate.

Anyway, here is the code for the css. (EDIT: This is the generated css from sass)

#search {

margin-top: 1px;

display: inline;

float: left;

margin-left: 10px;

margin-right: 10px;

width: 220px;

}

#search form {

position: relative;

}

#search input {

padding: 0 10px 0 29px;

color: #555555;

border: none;

background: url('/images/bg_searchbar.png?1296191141') no-repeat;

width: 180px;

height: 29px;

overflow: hidden;

}

#search input:hover {

color: #00ccff;

background-position: 0px -32px;

}

And here's the simple html:

Pretty simple? the placeholder is off for some reason but when you try to type in the input field, the text is the aligned. It seems that you can only change the color(for webkit) of the placeholder, but if I try to edit the padding of the containing input, it wrecks the design of the input! pulls out hair

Here are screenies of the placeholder and the input field with text input:

EDIT:

For now I have resorted to this jquery plugin.

It works right out of the box and it fixes my chrome's problem. I would still like to uncover what the problem is (if it has something to do with MY chrome or something)

I'm pretty sure it's not the styles since John Catterfeld reproduced it with no problems, so I'm hoping someone out there could still point me to the right direction as to why this is happening to me(my client's chrome as well. So this is probably native to Chrome/OSX if John is using windows)

回答1:

I got the same issue.

I fixed it by removing line-height from my input. Check if there is some lineheight which is causing the problem

回答2:

I had similar issue, my problem was with the side padding, and the solution was with, text-indent, I wasn't realize that text indent effect the placeholder side position.

input{

text-indent: 10px;

}

回答3:

If you want to keep your line-height and force the placeholder to have the same, you can directly edit the placeholder CSS since the newer browser versions. That did the trick for me:

input::-webkit-input-placeholder { /* WebKit browsers */

line-height: 1.5em;

}

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

line-height: 1.5em;

}

input::-moz-placeholder { /* Mozilla Firefox 19+ */

line-height: 1.5em;

}

input:-ms-input-placeholder { /* Internet Explorer 10+ */

line-height: 1.5em;

}

回答4:

line-height: normal;

worked for me ;)

回答5:

I had a problem, which appears just in internet explorer. Input field was styled

height:38px;

line-height:38px;

Unfortunately in IE the initial placeholder appears not at the correct position. But when I have clicked into the field and then left this field, the placeholder appeared on the right position.

My solution was to set:

line-height:normal;

回答6:

Removing the line-height indeed makes your text align with your placeholder-text, but it doesn't properly solve your problem since you need to adapt your design to this flaw (it's not a bug). Adding vertical-align won't do the deal either. I haven't tried in all browsers, but it doesn't work in Safari 5.1.4 for sure.

I have heard of a jQuery fix for this, that is not cross-browser placeholder support (jQuery.placeholder), but for styling placeholders, but I haven't found it yet.

In the meantime, you can resolve to the table on this page which shows different browser support for different styles.

Edit: Found the plugin! jquery.placeholder.min.js provides you with both full styling capabilities and cross-browser support into the bargain.

回答7:

Setting line-height: 0px; fixed it for me in Chrome

回答8:

I've created a fiddle using your screenshot as a background image and stripping out the extra mark-up, and it seems to work fine

http://jsfiddle.net/fLdQG/2/ (webkit browser required)

Does this work for you? If not, can you update the fiddle with your exact mark-up and CSS?

回答9:

I noticed the issue the moment I updated Chrome on os x to the latest stable release (9.0.597.94) so this is a Chrome bug and hopefully will be fixed.

I'm tempted not to even attempt to work around this and just wait for the fix. It'll just mean more work taking it out.

回答10:

The placeholder is not affected by line-height and padding is inconsistent on browsers.

I have found another solution though.

VERTICAL-ALIGN. This is probably the only time it works but try that instead and cave many lines of CSS code.

回答11:

Remove line-height or set using padding...it's working in all browser

回答12:

I found the answer that remedied my frustrations regarding this on John Catterfeld's blog.

... Chrome (v20-30) implements almost all styles but with a major caveat – the placeholder styles do no resize the input box, so stay clear of things like line-height and padding top or bottom.

If you are using line-height or padding you are going to be frustrated with the resulting placeholder. I haven't found a way around that up to this point.