图像按钮显示[提交＆QUOT;在Chrome浏览器顶部的图像 [英] Image Button Displaying "Submit" Over Top of Image in Chrome
问题描述
我有类似<一个问题href=\"http://stackoverflow.com/questions/8977520/image-button-displaying-submit-query-over-the-top-of-image-in-firefox\">this家伙的，但它发生在Chrome中。
值设置为=，所以对于Firefox的问题的修补程序已经在发挥作用。这只发生在Chrome而不是Firefox中。经由字preSS我的搜索表单主题code是如下：
＆LT;形式方法=获取级=搜索框行动=＆LT; PHP代码bloginfo（'URL'）;？＆GT;＆GT;＆LT; DIV ID =搜索外形包装＆GT; ＆LT;输入类型=文本ID =搜索框NAME =S值=ACCESSKEY =4/＆GT; ＆LT;输入类型=形象NAME =提交ID =searchsubmit级=nothiddenVALUE =/＆GT; ？＆所述; PHP的如果（get_option（'k2livesearch'））：＆GT; ＆LT; PHP ENDIF; ？＆GT;＆LT;跨度ID =searchreset称号=＆LT; PHP esc_attr_e（重置搜索，k2_domain'）;？＆GT;＆GT;＆LT; / SPAN＆GT; ＆所述;跨度的id =searchload＆GT;＆下; /跨度＆GT;
对不起迟到了，但一个很好的答案可能是有益的所有谁想要提交图片...
嗯，我会说，为什么不尝试用一个真正的提交类型和一些CSS像我下面的例子，也许它没有解决你问的方式，但我认为这是为您解决问题的最佳途径，这将是W3C的有效它会在所有的浏览器有没有更好的方式与图像要做到这一点，所以我恳请你试试code我提供的，我希望你会喜欢的方式我会做...
您提交行是：
＆LT;输入类型=形象NAME =提交ID =searchsubmit级=nothiddenVALUE =/＆GT;
将其更改为一个真正的提交按钮：
＆LT;输入类=nothidden类型=提交名称=提交ID =searchsubmit价值=你的价值/＆GT;＆LT;！ - / /如果需要你的style.css文件来创建你想要添加下面的风格和编辑！ // - ＆GT;
现在好了，你会说：我不希望有一个怪异的标准提交按钮！并且我同意！这就是为什么下面的风格时，CSS将帮助我们使用一个提交类型的图像，请阅读以下我的CSS ...
您没有张贴你的CSS行，所以我不能够写CSS最好为您的项目，但我希望我的回答会有所帮助。
input.nothidden {
边框样式：无; / **这需要删除边框！ ** /
显示：块;
字体大小：11像素; / **定义字体大小** /
字体重量：大胆的; / **定义你的字体粗细** /
！高度：23像素重要; / **图像的高度** /
/ **填充：4PX 0 0; - 如果需要，添加一些填充... ** /
文本对齐：中心; / **你在哪里想要的文字？左，右或中心？** /
文字修饰：无; / **不想要一个下划线或其他装饰品？ ** /
宽度：91px; / **图像的宽度** /
背景：网址（http://www.hollandiateam.eu/plaatjes/purple_small.gif）不重复滚动0 0透明的; / **这是你想要的！一个形象提交您的形式和不使用任何的javascript，W3C验证和在Firefox，Chrome和Internet Explorer没有问题！ ** /
边界：无; / **这是需要去除图像边界！ ** /
颜色：＃080808; / **这是文字的颜色将其更改为自己喜欢的颜色** /
} / **如果你想要一个悬停图像精灵或其它图像悬停下面的CSS线条，色彩等！ ** /
/ **使用下面，如果你想有悬停改变CSS！ ** /
input.nothidden：悬停{
背景位置：0 -23px; / **例如，如果您使用的是精灵的形象，否则使用背景：网址（http://www.hollandiateam.eu/plaatjes/purple_small.gif）不重复滚动0 0透明的;与路径你的形象，如果你想使用悬停和不使用精灵，你将需要添加的input.nothidden类使用的所有CSS线，改变图像的URL悬停... ** /
颜色：＃0000FF; / **悬停文本颜色** /
}如果你使用上面code，它会在所有的浏览器，如果你不能得到这个工作，请发表你的CSS和形式code和我将编辑我的答案，以满足您的需求
快乐编码
〜威廉
I have a problem similar to this guy's, but it's happening in Chrome.
Value set as ="", so the fix for the Firefox issue is already in play. This only happens in Chrome and not in Firefox. The code from my search form theme via Wordpress is as follows:
<form method="get" class="searchBox" action="<?php bloginfo('url'); ?>"> <div id="search-form-wrap"> <input type="text" id="searchBox" name="s" value="" accesskey="4" /> <input type="image" name="submit" id="searchsubmit" class="nothidden" value="" /> <?php if ( get_option('k2livesearch') ): ?> <?php endif; ?> <span id="searchreset" title="<?php esc_attr_e('Reset Search', 'k2_domain'); ?>"></span> <span id="searchload"></span>解决方案Sorry for being late but a good answer might be helpful to all who want submit images...
Well I would say why not try to use a real submit type and some CSS like my example below, maybe it's not solved the way you asked for but I believe it's the best way to solve your problems, it will be W3C Valid and it will work in all browsers there is no better way to do this with an image so I kindly ask you to try the code I provided, I hope you'll like the way I would do it...
Your submit line is:
<input type="image" name="submit" id="searchsubmit" class="nothidden" value="" />Change it to a real submit button:
<input class="nothidden" type="submit" name="submit" id="searchsubmit" value="Your value" /><!--// Add the style below and edit if needed to your style.css file to create what you want! //-->Well now you would say "I don't want a weird standard submit button!" and I agree! That's why the style below is used, CSS will help us to use a submit type image so please read my CSS below...
You didn't post your css lines so I'm not able to write best css for your project but I hope my answer will be helpful.
input.nothidden { border-style: none; /** This is needed to remove borders! **/ display: block; font-size: 11px; /** Define your font size **/ font-weight: bold; /** Define your font weight **/ height: 23px !important; /** Height of your image **/ /** padding: 4px 0 0; - add some padding if needed... **/ text-align: center; /** Where do you want the text? left, right or center?**/ text-decoration: none; /** Don't want a underline or other decorations? **/ width: 91px; /** Width of your image **/ background: url(http://www.hollandiateam.eu/plaatjes/purple_small.gif) no-repeat scroll 0 0 transparent; /** This is what you want! a image to submit your form and don't use any javascript, W3C validation and no problems in firefox, Chrome and Internet Explorer! **/ border: none; /** This is needed to remove image border! **/ color: #080808; /** This is the text color change it to your favorite color **/ } /** The css lines below if you want a hover image sprite or an other hover image, colors etc! **/ /** use the css below if you would like to have hover changes! **/ input.nothidden:hover { background-position: 0 -23px; /** example if you're using a sprite image, else use background: url(http://www.hollandiateam.eu/plaatjes/purple_small.gif) no-repeat scroll 0 0 transparent; with the path to your image, if you want to use hover and don't use sprites, you will need to add all css lines used by the input.nothidden class and change image url for hover... **/ color: #0000ff; /** hover text color **/ }If you use the above code, it will work in all browsers, if you can't get this to work, please post your css and form code and I will edit my answer to fit your needs.
Happy coding
~ Willem
这篇关于图像按钮显示[提交＆QUOT;在Chrome浏览器顶部的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
