diff --git a/components/page-header/nz-page-header.component.html b/components/page-header/nz-page-header.component.html
index 0556d96660d..055fb049486 100644
--- a/components/page-header/nz-page-header.component.html
+++ b/components/page-header/nz-page-header.component.html
@@ -1,8 +1,10 @@
 <ng-content select="nz-breadcrumb[nz-page-header-breadcrumb]"></ng-content>
 
-<div *ngIf="nzBackIcon !== null" (click)="onBack()" class="ant-page-header-back-icon">
-  <i *ngIf="isStringBackIcon" nz-icon [type]="nzBackIcon ? nzBackIcon : 'arrow-left'" theme="outline"></i>
-  <ng-container *ngIf="isTemplateRefBackIcon" [ngTemplateOutlet]="nzBackIcon"></ng-container>
+<div *ngIf="nzBackIcon !== null" (click)="onBack()" class="ant-page-header-back">
+  <div role="button" tabindex="0" class="ant-page-header-back-button">
+    <i *ngIf="isStringBackIcon" nz-icon [type]="nzBackIcon ? nzBackIcon : 'arrow-left'" theme="outline"></i>
+    <ng-container *ngIf="isTemplateRefBackIcon" [ngTemplateOutlet]="nzBackIcon"></ng-container>
+  </div>
   <nz-divider nzType="vertical"></nz-divider>
 </div>
 
diff --git a/components/page-header/nz-page-header.component.ts b/components/page-header/nz-page-header.component.ts
index a168c6b6b54..ed7150df0ea 100644
--- a/components/page-header/nz-page-header.component.ts
+++ b/components/page-header/nz-page-header.component.ts
@@ -32,7 +32,18 @@ import { NzPageHeaderFooterDirective } from './nz-page-header-cells';
   host: {
     class: 'ant-page-header',
     '[class.ant-page-header-has-footer]': 'nzPageHeaderFooter'
-  }
+  },
+  styles: [
+    `
+      .ant-page-header-back-button {
+        border: 0px;
+        background: transparent;
+        padding: 0px;
+        line-height: inherit;
+        display: inline-block;
+      }
+    `
+  ]
 })
 export class NzPageHeaderComponent implements OnInit, OnChanges {
   isTemplateRefBackIcon = false;
diff --git a/components/page-header/nz-page-header.spec.ts b/components/page-header/nz-page-header.spec.ts
index e57dbd21fd7..fccd1e64beb 100644
--- a/components/page-header/nz-page-header.spec.ts
+++ b/components/page-header/nz-page-header.spec.ts
@@ -65,14 +65,14 @@ describe('NzPageHeaderComponent', () => {
     const fixture = TestBed.createComponent(NzDemoPageHeaderBasicComponent);
     const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent));
     fixture.detectChanges();
-    expect(pageHeader.nativeElement.querySelector('.ant-page-header-back-icon > i.anticon-arrow-left')).toBeTruthy();
+    expect(pageHeader.nativeElement.querySelector('.ant-page-header-back i.anticon-arrow-left')).toBeTruthy();
   });
 
   it('should does not have an default back icon', () => {
     const fixture = TestBed.createComponent(NzDemoPageHeaderContentComponent);
     const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent));
     fixture.detectChanges();
-    expect(pageHeader.nativeElement.querySelector('.ant-page-header-back-icon')).toBeFalsy();
+    expect(pageHeader.nativeElement.querySelector('.ant-page-header-back')).toBeFalsy();
   });
 
   it('should nzBack work', () => {
@@ -82,7 +82,7 @@ describe('NzPageHeaderComponent', () => {
     spyOn(context, 'onBack');
     fixture.detectChanges();
     expect(context.onBack).not.toHaveBeenCalled();
-    const back = pageHeader.nativeElement.querySelector('.ant-page-header-back-icon');
+    const back = pageHeader.nativeElement.querySelector('.ant-page-header-back');
     (back as HTMLElement).click();
     fixture.detectChanges();
     expect(context.onBack).toHaveBeenCalled();