Question

我正面临着一些关于mozilla firefox的css问题，我写的css在chrome中运行良好。以下是参考链接：

我试过用display：-moz-box;仍然在mozilla不好，我不知道如何为mozilla firefox编写特定的CSS。谁能帮我？

事件页面的代码如下：

$(document).ready(function(){
    $(".plus").click(function(){
        //to get the current element id 
        //alert($(this).attr('id'));
       $('#a'+$(this).attr('id')).slideToggle();
    });
});

<style>
.event_profit{
  background: #ecece9;
  width: 100%;
  float: left;
  border-bottom: 2px solid #fff;
  /*height:180px;*/
  }  
.extarContent{
  background: #ecece9;
  width: 100%;
  border-bottom: 2px solid #fff;
  height:auto;
  margin-left:2px;
  } 
  .extarContent p{
  margin-left:19%;
  margin-right: 10%;
  text-align: justify;
  padding-bottom:10px;
  }
.plus{
  width:5%;
  margin-top: 5%;
  margin-left: 5%;
}
.event_content p{
	margin: 10px 0;
}
.maincontainer{
 width:100%;
 display: -webkit-inline-box;

}
.event_image{
  width: 15%;
  margin-left: 2%;
  margin-top:1%;
}

.event_content{
 width: 70%;
  margin-top: 2%;
  margin-left: 2%;
  text-align: justify;
}
</style>

<div class="event_profit">
	
	<div class="maincontainer">
	
		<div class="event_image">
		
	<img alt="Upload a image for event" src="$cur_event_image.getData()" class="img-circle" style="height:150px;width:150px">
	
		</div>
		
		<div class="event_content" >
		   <h3>Kickoff Event!</h3>
			<p>	</p>
			<p>Thursday, April 9, 2015, 4:00-7:00PM
8102 East Jackrabbit Road, Scottsdale, AZ

Click here for a printable flyer.

Join us for an Open House to unveil Scottsdale Adapted Recreation's brand new
Multi-Sensory Environment! Let your senses guide your journey through the four zones of this unique space!</p>
		
		</div>
		
		<div class="plus" id="$a">
			<img src="/documents/149710/0/plus2.png/4498199f-61a1-45cc-850c-4884e12b7193?t=1428069502306" style="width:33px;height:33px;"/>
		</div>
          	
	</div>
  <div class="extarContent" id="a$a" style="display:none">
        <p>  </p>
		<p>Ribbon Cutting ceremony with Mayor Jim Lane! (6:30)
Prizes raffled every half hour!
Healthy snacks!
Leave your mark on the room with a handcrafted addition!</p>
   </div>

</div>

Answer 1

Mozilla不支持display:inline-box;。

所以，你可以完成这类代码：

.maincontainer{
    display:inline-block;
}
.event_image{
    display:inline-block;
    vertical-align: top;
}
.event_content{
    display:inline-block;
    vertical-align: top;
}
.plus{
    display:inline-block;
    vertical-align: top;
}

Answer 2

执行以下操作

1.删除.maincontainer类中的display:inline-box; 2.add float: left; in＆＃34; .event_image＆＃34; ，＆＃34; .event_content＆＃34;和＆＃34; .plus＆＃34;课程

margin-left和width属性在mozilla firefox中不起作用

2 个答案: