diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html
index f66fc480740f..e386c7a5a43c 100644
--- a/src/material/datepicker/calendar-body.html
+++ b/src/material/datepicker/calendar-body.html
@@ -66,13 +66,13 @@
         [attr.aria-describedby]="_getDescribedby(item.compareValue)"
         (click)="_cellClicked(item, $event)"
         (focus)="_emitActiveDateChange(item, $event)">
-        <div class="mat-calendar-body-cell-content mat-focus-indicator"
+        <span class="mat-calendar-body-cell-content mat-focus-indicator"
           [class.mat-calendar-body-selected]="_isSelected(item.compareValue)"
           [class.mat-calendar-body-comparison-identical]="_isComparisonIdentical(item.compareValue)"
           [class.mat-calendar-body-today]="todayValue === item.compareValue">
           {{item.displayValue}}
-        </div>
-        <div class="mat-calendar-body-cell-preview" aria-hidden="true"></div>
+        </span>
+        <span class="mat-calendar-body-cell-preview" aria-hidden="true"></span>
     </button>
   </td>
 </tr>
diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss
index 2a4135dea210..de23c15c3dfd 100644
--- a/src/material/datepicker/calendar-body.scss
+++ b/src/material/datepicker/calendar-body.scss
@@ -76,6 +76,7 @@ $calendar-range-end-body-cell-size:
   left: 0;
   z-index: 0;
   box-sizing: border-box;
+  display: block;
 
   // We want the range background to be slightly shorter than the cell so
   // that there's a gap when the range goes across multiple rows.