는 jQuery를 .CSS는() FF에서 작업하지만,

내가 백본을 사용하여 다음과 같은 견해를 가지고있어 크롬과 사파리에서 작업을 수행하지 :는 jQuery를 .CSS는() FF에서 작업하지만,

class GT.RunManager.Views.FloorplanView extends Backbone.View 
    className: 'floorplan-view' 

    events: 
    'click .violation-marker' : 'edit_location' 
    'click' : 'create_location' 

initialize: (@options) -> 
    @run = @options.run 
    @student = @options.student 
    @floorplan = @options.run.get('floorplan') 
    @locations = new GT.RunManager.Collections.Locations() 
    @locations.run = @options.run 
    @locations.on 'add', @set_marker 
    @locations.on 'reset', @load_markers 

@run.on 'remove_location', (location) => 
    location.destroy() if location 
    @load_markers() 

@locations.fetch data: { student_id: @student.id } 
@render() 

render: => 
    if @floorplan 
    @$el.css 'background-image', "url(data:image/png;base64,#{@floorplan.url})" 
    this  

create_location: (e) => 
    @locations.create x: e.offsetX - 10, y: e.offsetY - 10, student_id: @student.id, run_id: @run.id 

load_markers: => 
    @$el.find('i').remove() 
    @locations.each (location) => @set_marker(location, false) 

set_marker: (location, prompt = true) => 
    marker = new GT.RunManager.Views.ViolationMarker(location: location, x: location.get('x'), y: location.get('y')) 
    @$el.append marker.el 
    if prompt 
    @run.trigger 'violations:set', location

class GT.RunManager.Views.ViolationMarker extends Backbone.View 
className: 'violation-marker' 

template: JST['app/templates/violation_marker'] 

initialize: (@options) -> 
    @x = @options.x 
    @y = @options.y 
    @location = @options.location 
    @render() 

render: => 
    @$el.html @template() 
    @$el.data 'location', @location 
    @$el.css 
    'top': @y 
    'left': @x 
    this

에서 호출되는 아이디어는 사용자가 터치 한 화면에 아이콘을 배치하는 것입니다 (iPad에서는 단축키로 사용). Chrome과 Safari에서는 잘 작동하지만 Firefox에서는 상위 div의 왼쪽 상단에 아이콘이 표시되지 않습니다.

아이디어가 있으십니까?

편집 :

div.violation-marker { 
position: absolute; 
background-color: red; 
@include border-radius(6px); 
padding: 4px;}

템플릿 (부트 스트랩) 그냥 :

<i class="icon icon-fire icon-white"></i>

그리고 부모 DIV가와 스타일된다

.floorplan-view { 
position: relative; 
float: left; 
margin-left: 100px; 
width: 755px; 
height: 755px; }

이 백본보기는 다음 CSS로 스타일입니다

출처

2012-06-06 John

'@ 엘'과 그 상위 요소에 적용되는 다른 CSS는 무엇입니까? –

이것이 @el에 적용되는 유일한 CSS입니다. 그것에는 CSS가있는 클래스가 있습니다. div.violation-marker { \t \t 위치 : 절대; \t \t background-color : red; \t \t @include border-radius (6px); \t \t 패딩 : 4px; \t} – John

부모 정보는 어떻게됩니까? 부모는'position : relative'입니까? '.violation-marker '에 크기가 없습니까? –

Firefox가 e.offsetX와 e.offsetY를 처리하지 못한다는 것이 밝혀졌습니다. 내가 위치를 바꾼 길을 바꾸 자마자 모든 것이 잘 작동했다. 모든 도움

x = (ev.offsetX || ev.clientX - $(ev.target).offset().left)

감사합니다 다음은 X-COORD를 잡아의 파이어 폭스 방지 버전입니다.

출처

2012-06-09 15:12:38 John

는 jQuery를 .CSS는() FF에서 작업하지만,

답변

관련 문제