HTML表单单选按钮不工作

问题描述:

我的index.php包含一堆php和javascript代码,并且在html中格式化为html。我对CSS不太了解,但我不认为这会影响这个html表单的可用性。这是该指数代码:HTML表单单选按钮不工作

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <title>Untitled</title> 
    <meta name="description" content="Choose"/> 
    <meta name="keywords" content="choose "/> 
    <link rel="shortcut icon" href="http://i/favicon.ico"> 

    <!--[if lt IE 7]> 
     <script type="text/javascript" src="FullPageBackgroundImage/js/mootools.js"></script> 
     <script type="text/javascript" src="FullPageBackgroundImage/js/core.js"></script> 
    <![endif]--> 


<link rel="stylesheet" type="text/css" href="style.css" /> 

</head> 

<body> 

<div id="content"> 
<div id="poll"> 
<form> 

<input id="ch1" type="radio" name="choice" value="0" /> 
<label for="ch1"> 
<?php echo $current['choice1']; ?> 
</label> 
<br /> 
<input id="ch2" type="radio" name="choice" value="1" /> 
<label for="ch2"> 
<?php echo $current['choice2']; ?> 
</label> 
</form> 
</div> 
hello 

</div> 

</body> 
</html> 

这是CSS:

body { 
    background-color:#000; 
    background:#fff; 
    background-repeat: repeat-x; 
    background-attachment:fixed; 
} 

#top_header{ 
    width:100%; 
    height:52px; 
    background:#FFF; 
    position:fixed; 
    left:0px; 
    top:0px; 
    z-index:-1; 

} 

#logo{ 
    background-image:url('Images/web_buttons.jpg'); 
    position:fixed; 
    top:3px; 
    left:0px; 
    width:366px; 
    height:45px; 

} 

#display{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -40px; 
    position:fixed; 
    top:0px; 
    left:420px; 
    width:57px; 
    height:19px; 

} 

#display_divider{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: -100px -45px; 
    position:fixed; 
    top:0px; 
    left:477px; 
    width:8px; 
    height:50px;  
} 

a.display_single{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -80px; 
    position:fixed; 
    top:0px; 
    left:485px; 
    width:67px; 
    height:26px; 
} 

a:hover.display_single{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -104px; 
    position:fixed; 
    top:0px; 
    left:485px; 
    width:67px; 
    height:26px; 
} 

a.display_multiple{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -128px; 
    position:fixed; 
    top:26px; 
    left:485px; 
    width:86px; 
    height:26px; 
} 
a:hover.display_multiple{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -152px; 
    position:fixed; 
    top:26px; 
    left:485px; 
    width:86px; 
    height:26px; 
} 

#view{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -58px; 
    position:fixed; 
    top:0px; 
    left:620px; 
    width:37px; 
    height:19px;  
} 

#view_divider{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: -100px -45px; 
    position:fixed; 
    top:0px; 
    left:657px; 
    width:8px; 
    height:50px;  
} 

a.view_WTFest{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -178px; 
    position:fixed; 
    top:0px; 
    left:665px; 
    width:69px; 
    height:26px; 
} 

a:hover.view_WTFest{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -204px; 
    position:fixed; 
    top:0px; 
    left:665px; 
    width:69px; 
    height:26px; 
} 

a.view_lamest{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -228px; 
    position:fixed; 
    top:26px; 
    left:665px; 
    width:69px; 
    height:25px; 
} 

a:hover.view_lamest{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -253px; 
    position:fixed; 
    top:26px; 
    left:665px; 
    width:69px; 
    height:25px; 
} 

a.view_latest{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -275px; 
    position:fixed; 
    top:0px; 
    left:734px; 
    width:69px; 
    height:25px; 
} 

a:hover.view_latest{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -300px; 
    position:fixed; 
    top:0px; 
    left:734px; 
    width:69px; 
    height:25px; 

} 

a.view_oldest{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -323px; 
    position:fixed; 
    top:26px; 
    left:734px; 
    width:69px; 
    height:26px; 
} 

a:hover.view_oldest{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -348px; 
    position:fixed; 
    top:26px; 
    left:734px; 
    width:69px; 
    height:25px; 

} 

a.submit_choices{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -373px; 
    position:fixed; 
    top:3px; 
    right:3px; 
    width:164px; 
    height:41px; 
} 

a:hover.submit_choices{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: -162px -373px; 
    position:fixed; 
    top:3px; 
    right:3px; 
    width:164px; 
    height:41px; 

} 

a.navigation_left{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -413px; 
    position:fixed; 
    bottom:6px; 
    left:3px; 
    width:134px; 
    height:19px; 
} 

a:hover.navigation_left{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: -134px -413px; 
    position:fixed; 
    bottom:6px; 
    left:3px; 
    width:134px; 
    height:19px; 
} 

a.navigation_right{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: 0px -435px; 
    position:fixed; 
    bottom:6px; 
    right:3px; 
    width:104px; 
    height:19px; 
} 

a:hover.navigation_right{ 
    background-image:url('Images/web_buttons.jpg'); 
    background-position: -134px -435px; 
    position:fixed; 
    bottom:6px; 
    right:3px; 
    width:104px; 
    height:19px; 
} 

/*conten*/ 
#content{ 
    position:relative; 
    top:55px; 
    z-index:-3; 
} 

有了这个,我只能选择第二个单选按钮,第一个不能被选择。奇怪的是,如果我删除输入之间的中断,它可以很好地工作。或者我可以在那里休息,并在表格后删除'helloworld',它也可以。

任何人有任何想法或看到任何错误?我想对彼此的顶部的按钮,我需要有下面的其他文字..

的CSS代码是在这里

+0

将您的代码从问题复制粘贴到空白html文件,并确认它确实可行。 – zerkms 2010-11-02 05:17:34

+0

粘贴到您的CSS请 – 2010-11-02 05:27:49

+0

哪些浏览器出现这种情况? – Ben 2010-11-02 06:01:25

为什么你有z-index:-3?您正在告诉浏览器将内容放在其他图层的后面...

+0

我用上面的代码制作了一个页面,并进行了一些测试,并且这条线确实是导致问题的原因。 – patmortech 2010-11-02 06:36:56

+0

是的,我应该把它拿出来......非常感谢你们! – Cody 2010-11-02 06:42:03

的CSS是几乎可以肯定这里有毛病。看起来有一个孩子节点被选中(<br />),当你不这样做。也可能发生在Javascript中。